左固定右适应

最新推荐文章于 2020-08-22 16:19:45 发布

przlovecsdn

最新推荐文章于 2020-08-22 16:19:45 发布

阅读量295

点赞数

文章标签：页面左边固定右边适应

本文链接：https://blog.csdn.net/przlovecsdn/article/details/77992522

版权

左固定右适应

 
  //CSS样式 
 
  html, 
 
      body { 
 
          margin:0; 
 
          padding:0; 
 
          height: 100%; 
 
      } 
 
      .container { 
 
          height: 100%; 
 
      } 
 
      .left { 
 
          height: 100%; 
 
          width: 100px; 
 
          float: left; 
 
      } 
 
      .right { 
 
          /*width: 100%;*/ 
 
          height: 100%; 
 
          background-color: green; 
 
          margin-left: 100px; 
 
      } 
 
      .top,.bottom{ 
 
          height: 100px; 
 
          width: 100%; 
 
          background-color: orange; 
 
      }

 
  //HTML代码 
 
  <body> 
 
  <div class="top"></div> 
 
      <div class="container"> 
 
          <div class="left"></div> 
 
          <div class="right"></div> 
 
      </div> 
 
      <div class="bottom"></div> 
 
  </body>