文档章节

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

lbc19920615
 lbc19920615
发布于 2014/11/23 18:21
字数 293
阅读 454
收藏 0

截图

使用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>


© 著作权归作者所有

下一篇: 好听的bgm
lbc19920615
粉丝 6
博文 45
码字总数 11562
作品 0
南京
程序员
私信 提问
加载中

评论(2)

lbc19920615
lbc19920615

引用来自“请叫我赵小宝”的评论

够简洁的啊

只是个布局
请叫我赵小宝
请叫我赵小宝
够简洁的啊
(X)HTML/CSS 框架--ThinkCSS

TC (”ThinkCSS”) 是一个 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防...

匿名
2010/11/18
34.5K
0
浅谈Bootstrap如何支持IE8

去年底自己从大公司跳出来,跟一个哥们创业,也拾起了多年没有碰的coding和eclipse。没想到技术演化的这么快,之前都是J2EE,现在PHP已经在Web端很流行了。 做开发的都知道,UI, UE是我们的最...

圣西罗南看台
2013/06/09
52.5K
26
新年快乐!pandyle 1.1.0 发布,非常简单的前端 MVVM 库

pandyle是一个基于jquery的MVVM库。它为jquery提供了基本的模板和组件功能。pandyle秉承jquery -- write less, do more 的设计理念,主要关注点即在于简单,它的大小只有7kb(压缩后),易学...

熊猫rrr
01/01
0
0
pandyle 1.0.0 版本发布,非常简单的前端 MVVM 库

pandyle是一个基于jquery的MVVM库。它为jquery提供了基本的模板和组件功能。pandyle秉承jquery -- write less, do more 的设计理念,主要关注点即在于简单,它的大小只有7kb(压缩后),易学...

熊猫rrr
2018/10/26
299
1
TinyAdmin前端展现框架

一直在苦苦寻找一个合适的前端框架,少说也看了几十个。 ext太重,而且有内存泄露,在IE下就是个悲剧。 dhtmlx,速度比较好,开源是GPL不适合企业应用,商业的要钱,倒也不贵万把块钱,但是样...

悠悠然然
2014/11/01
0
77

没有更多内容

加载失败,请刷新页面

加载更多

0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0
mysql PL(procedure language)流程控制语句

在MySQL中,常见的过程式SQL语句可以用在存储体中。其中包括IF语句、CASE语句、LOOP语句、WHILE语句、ITERATE语句和LEAVE语句,它们可以进行流程控制。 IF语句相当于Java中的if()...else if(...

edison_kwok
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部