zoukankan      html  css  js  c++  java
  • css后台页面布局技巧

    目标:
    实现左边侧边栏固定,右边内容区自适应
    侧边栏内容较少时背景100%高度展示
    侧边栏内容较多时可以滚动,且不让显示滚动条(显示太丑)
    内容区较少时不出现滚动条,较多时可以滚动
    code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
      * {
        padding: 0;
        margin: 0;
      }
      
      .wrapper {
        position: relative;
        height: 100%;
         100%;
      }
      
      .left {
         180px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow: hidden;
      }
      
      .menu {
        min-height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: -17px;
        overflow-y: scroll;
        background-color: yellow;
      }
      
      .content {
        min-height: 100%;
        margin-left: 180px;
        background-color: green;
      }
      </style>
    </head>
    
    <body>
      <div class="wrapper">
        <div class="left">
          <ul class="menu">
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
            <li>我是列表</li>
          </ul>
        </div>
        <div class="content">
        	<p>我是内容</p>
        	<p>我是内容</p>
        	<p>我是内容</p>
        	<p>我是内容</p>
        	<p>我是内容</p>
        	<p>我是内容</p>
        	<p>我是内容</p>
        	<p>我是内容</p>
        	<p>我是内容</p>
        </div>
      </div>
    </body>
    
    </html>
    

  • 相关阅读:
    巴洛克式和哥特式的区别
    推荐阅读书籍,是时候再行动起来了。
    AtCoder ABC 159F Knapsack for All Segments
    AtCoder ABC 159E Dividing Chocolate
    AtCoder ABC 158F Removing Robots
    AtCoder ABC 158E Divisible Substring
    AtCoder ABC 157F Yakiniku Optimization Problem
    AtCoder ABC 157E Simple String Queries
    AtCoder ABC 157D Friend Suggestions
    AtCoder ABC 156F Modularness
  • 原文地址:https://www.cnblogs.com/yesyes/p/7086436.html
Copyright © 2011-2022 走看看