三栏布局

Posted 2020-11-11 zph

实现效果：导航栏固定定位，左侧菜单固定定位，左侧菜单滚动的时候不影响右侧内容，右侧内容可以自由滚动

两个demo的实现方法不一样

demo1

    *{
      padding:0;
      margin:0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    ul,li{
      list-style-type:none;
    }
    .w1200{
      width: 1200px;
      margin: 0 auto;
    }
    .nav{
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      overflow: hidden;
      background: red;
      z-index: 1000;
    }
    .nav li{
      float: left;
      margin-right: 10px;
      padding: 20px 40px;
    }
    .container{
      position: fixed;
      left: 0;
      top: 0;
      bottom:0;
      width: 100%;
      height: 100%;
      margin-top: 61px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .container .w1200{
      position: relative;
    }
    .container .left{
      position: fixed;
      top: 61px;
      bottom: 0;
      width: 200px;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .container .left ul li{
      padding: 10px;
    }
    .container .right{
      width: 100%;
      padding-left: 220px;
    }
    .container .right ul li{
      padding: 10px;
    }

demo2

要点：滚动内容区域的父级必须设置height100%，以及html,body{height:100%}

    html,body{
      padding:0;
      margin:0;
      box-sizing: border-box;
      height: 100%;
    }
    ul,li{
      list-style:none;
    }
    #app{
      overflow: hidden;
      height: 100%;
    }
    .nav{
      width: 100%;
      height: 80px;
      background: red;
      position: fixed;
      left:0;
      top:0;
    }
    .container{
      margin-top: 80px;
      width: 100%;
      height: 100%;
      overflow: auto;
      overflow-x: hidden;
    }
    .w1200{
      position: relative;
      width: 1200px;
      height: 100%;
      margin: 0 auto;
    }
    .left{
      position: fixed;
      top: 80px;
      bottom: 0;
      z-index: 2;
      width: 230px;
      height: 100%;
      overflow: auto;
      overflow-x: hidden;
    }
    .right{
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      padding-left: 240px;
    }
    .list{
      padding-bottom: 200px;
    }
    .list li{
      padding: 10px;
    }