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>
    

  • 相关阅读:
    学习笔记2-查看目录文件
    学习笔记1-基本信息及相关目录
    【图论】二分图最大匹配
    【图论】Dinic算法
    【图论】最小割
    【数据结构】左偏树
    【数学】欧拉定理
    【数据结构】ST表
    【数学】博弈模型
    【字符串】后缀数组
  • 原文地址:https://www.cnblogs.com/yesyes/p/7086436.html
Copyright © 2011-2022 走看看