左边固定,右边自适应布局模板

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .head {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: red;
      }

      .mainBox {
        position: fixed;
        top: 50px;
        bottom: 0;
        width: 100%;
      }

      .mainBox .leftBox {
        float: left;
        width: 200px;
        height: 100%;
        box-sizing: border-box;
        background: coral;
        z-index: 2;
        position: relative;
      }

      .mainBox .rightBox {
        height: 100%;
        margin-left: 200px;
        box-sizing: border-box;
        overflow-y: auto;
        padding-top: 50px;
      }

      .breadNav {
        position: fixed;
        z-index: 1;
        top: 50px;
        left: 0;
        width: 100%;
        height: 50px;
        padding-left: 200px;
        background: burlywood;
      }
    </style>
  </head>

  <body>
    <!-- tips：
    1.通过设置父元素的 position:absolute; top：0; bottom：0（这样可以盛满全屏，原来body高度为0，现在已经被mainbox元素撑满了全屏）
      然后子元素的 height:100%,让子元素高度继承父元素高度（任何元素高度可以继承其父元素高度   如果父元素有固定高度哪怕是百分比继承的高度）

	2.通过 让左边固定宽度的元素浮动  和  设置右边自适应元素margin-left（浮动特性：浮动元素之后的元素将围绕它）
    -->
    <div class="head">aaaaaaaaaaaa</div>
    <div class="mainBox">
      <div class="breadNav">aaaaaaaaaaaa jkshdkjsdsjhdkjs</div>
      <div class="leftBox">
        左盒子，固定宽度200px，高度自适应铺满屏幕剩余高度
      </div>
      <div class="rightBox">
        <div class="innerWrap">
          <h1>d11dd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>ddd</h1>
          <h1>dddlast</h1>
        </div>
      </div>
    </div>
  </body>
</html>
左边固定,右边自适应布局模板

猜你喜欢
