一个简单的百分百后台模板框架 兼容ie8

原创
2014/11/23 18:21
阅读数 2.4K

截图

使用table-layout实现 左栏任意大小 右栏保持填充 右栏内部高度也可自动适应

代码

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

   html {
       -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
       box-sizing:border-box;
       overflow:hidden;
   }

   html, body {
      height: 100%;
   }

   .container {
      width: 100%;
      height: 100%;
      display: table;
      border-collapse: collapse;
      background-color: #ccc;
   }

   .row {
      display: table-row;
   }

   .col {
      display: table-cell;
      vertical-align: top;
   }

   .block {
      width: 300px;
      /*height: 1700px;*/
 background: #129982;
   }

   .wf {
      width: 100%;
   }

   .table {
      width: 100%;
      height: 100%;
      display: table;
      border-collapse: collapse;
   }

   .scroll {
      width: 100%;
      position: relative;
      left: 0;
      top: 0;
      overflow: scroll;
   }

   .table-row {
      display: table-row;
   }

   .table-cell {
      display: table-cell;
   }

   .pl {
      height: 1200px;
   }

   .hf {
      height: 100%;
   }

   .bn {
      height: 40px;
   }

   /*.hf > * {*/
      /*height: 100%;*/
   /*}*/
 </style>
</head>
<body>
   <div class="container">
      <div class="row">
         <div class="col">
            <div class="scroll hf">
               <div class="block">
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  <br/>
                  123132
               </div>
            </div>
         </div>
         <div class="col wf">
            <div class="scroll hf">
               <div class="container">
                  <div class="row">
                     <div class="col">
                        <div class="scroll">
                           <div class="bn">1</div>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col">
                        <div class="scroll">
                           2
                        </div>
                     </div>
                  </div>
                  <div class="row hf">
                     <div class="col">
                        <div class="scroll hf">
                           3
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>


展开阅读全文
加载中
点击加入讨论🔥(2) 发布并加入讨论🔥
打赏
2 评论
0 收藏
0
分享
返回顶部
顶部