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%;
    width: 100%;
  }
  
  .left {
    width: 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>

posted @ 2017-06-27 17:51  wmui  阅读(495)  评论(0)  编辑  收藏  举报