<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div两栏等高布局</title>
<style type="text/css">
*{
padding: 0;margin: 0;text-align: center;
}
.header,.footer{
padding: 10px 0;width: 100%;background: #eee;font-size: 20px;
}
.wrap{
width: 100%;
margin: 0 auto;
overflow: hidden;

display: inline-block;
}
.wrap:after{
display: block;
content:'[DO NOT LEAVE IT IS NOT REAL]';
height: 0;clear:both;
visibility: hidden;

}
.left{
width: 30%;float: left;background: #fff;text-align: left;
}
.right{
width: 70%;float: left;background: #0278b5;
}
.left,.right{
padding-bottom: 32767px  !important;
margin-bottom: -32767px  !important;
}
@media all and(min-width:0px){
.left,.right{
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
.left:before,.right:before{
content:'[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height:0;
}
}
.footer{
float: left;
}

</style>

</head>
<body>
<div class="wrap">
<div class="header">
<h1>header</h1>
</div>
<div class="left">
<h2>sideleft</h2>
左上
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
左下

</div>
<div class="right">
<h2>sideright</h2>

右上
<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/>
右下
</div>

</div>
<div class="footer">
<h1>footer</h1>
</div>

</body>

</html>

注释：

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
例如a:after{content:‘[DO NOT LEAVE IT IS NOT REAL]'}则会在链接后面加上[DO NOT LEAVE IT IS NOT REAL]文本；

32767应该是动态脚本生成，为16位有符号整数最大值，没有太大意义

机器字长为16位，则无符号数的表示范围是0-65535，有符号位的表示范围：-32767-32767（此数值对应原码表）

1000-0  （15个0）这个数因为是补码表示，所以
它不是0，而是：-2的15次方=-32768.
这个是最小的；
最大到：
0111-1 (15个1)

=2的15次方-1
=32767

第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/details.css">
<!-- // <script type="text/javascript" src="js/index.js"></script> -->
<style type="text/css">
/* .container {width:960px; height:100%; overflow:hidden; margin:0 auto;}
.left {height:100%; width:200px; overflow:hidden; padding-bottom:9999px; margin-bottom:-9999px; float:left; display:inline;}
.right {width:750px; float:right; height:auto;}*/
#content{overflow:hidden;}
.left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}
.right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}
/*.center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}*/
</style>
</head>
<body>
<!-- <div class="container">
<div class="left" style="background:red"></div>
<div class="right" style="background:pink"></div>
</div> -->
<div id="content">
<div class="left">左边，无高度属性，自适应于最高一栏的高度
</div>
<div class="right">右边，无高度属性，自适应于最高一栏的高度
<br>
<br>
<br>
<br>
<br>
</div>
<div class="center">中间，高度600像素，左右两栏的高度与之自适应</div>
</div>
</body>
</html>

 

div两栏等高布局的更多相关文章

  1. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  2. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

  3. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. 多种方法实现div两列等高（收集整理）

    HTML骨架 <div id="header">头部</div> <div id ="container"> <div ...

  5. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  6. css两列等高布局

    布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...

  7. 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

    代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...

  8. 利用jQuery进行三行两列等高布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS 实现：两栏布局（等宽布局）

    ☊[实现要求]:两栏等宽布局 <div class="demo3"> <div class="col-1"></div> & ...

随机推荐

  1. [转]ASP.NET MVC4+BootStrap 实战(一)

    本文转自:http://leelei.blog.51cto.com/856755/1587301 好久没有写关于web开发的文章了,进到这个公司一直就是winform和Silverlight,实在是没 ...

  2. JAVA IO 以及 NIO 理解

    由于Netty,了解了一些异步IO的知识,JAVA里面NIO就是原来的IO的一个补充,本文主要记录下在JAVA中IO的底层实现原理,以及对Zerocopy技术介绍. IO,其实意味着:数据不停地搬入搬 ...

  3. Vijos1392拼拼图的小衫[背包DP｜二维信息DP]

    背景 小杉的幻想来到了经典日剧<死亡拼图>的场景里……被歹徒威胁,他正在寻找拼图(-.-干嘛幻想这么郁闷的场景……). 突然广播又响了起来,歹徒竟然又有了新的指示. 小杉身为新一代的汤浅, ...

  4. NOIP2014飞扬的小鸟[DP][WRONG]

    坑人啊朴素的dp 75分 用了完全背包才是80分,结果普遍偏小 为什么啊啊啊啊啊 等以后再写一遍吧 #include<iostream> #include<cstdio> #i ...

  5. 第8章 用户模式下的线程同步（4）_条件变量（Condition Variable）

    8.6 条件变量(Condition Variables)——可利用临界区或SRWLock锁来实现 8.6.1 条件变量的使用 (1)条件变量机制就是为了简化 “生产者-消费者”问题而设计的一种线程同 ...

  6. [转]关于vs调试正确。但是发布到iis就出现无法访问后天局面

    最近使用extjs+ashx进行ajax请求过程操作的时候发现一个问题..当我把程序发布到iis的时候就出现一只不执行到success回调函数. 当弹出状态值一看尽然是500.我就纳闷了.又没有语法错 ...

  7. MySQL注射的过滤绕过技巧[1]

    SQL注射的绕过技巧较多,此文仅做一些简单的总结. 前文已经提到,最好利用的注射点: 支持Union 可报错 支持多行执行.可执行系统命令.可HTTP Request等额外有利条件 若非以上类型,则可 ...

  8. HTML 学习笔记 CSS样式（背景）

    背景色 可以使用background-color属性为元素设置背景色 这个属性接受任何合法的颜色值. 可以使用background-image属性来喂元素设置背景图片. 背景重复 如果需要在页面上对背 ...

  9. proxy改变this指向

    var core_slice = Array.prototype.slice; var proxy = function(context,fn) { var args, proxy; if ( typ ...

  10. redis采用tcmalloc导致无法释放内存的问题

    from:http://wangneng-168.iteye.com/blog/2100379 redis使用tcmalloc管理内存,当删除了redis的key后,通过redis的info命令查看内 ...