左右两个div高度自动一致，自适应高度
2012-03-27 19:39
381 查看
1、js实现div自适应高度
代码如下：
<script type="text/javascript">
<!--
window.onload=window.onresize=function(){
if(document.getElementById("mm2").clientHeight<document.getElementById("mm1").clientHeight){
document.getElementById("mm2").style.height=document.getElementById("mm1").offsetHeight+"px";
}
else{
document.getElementById("mm1").style.height=document.getElementById("mm2").offsetHeight+"px";
}
}
-->
</script>
（注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；我测试在IE6.0/IE7.0下通过，考虑绝大数人仍然用的是IE，所以并没有在opera和firefoxs下调试，哪位用的是opera或ff。）
2、纯CSS方法
css里代码（调试通过，但不会显示div下边框，即border-bottom）：
/*左右自适应相同高度start*/
#m1,#m2
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#m1,#m2
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#m1:before, #m2:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/*左右自适应相同高度end*/
3、加背景图片
这个方法，很多大网站在使用，如163，sina等。
XHTML代码：
<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
CSS代码:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
无JS方法二:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css</title>
<style type="text/css">
<!--
body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="center">Center Column Content</div>
<div id="leftRail">
<p>Left<br />
Sidebar</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="rightRail">Right Sidebar</div>
</div>
</body>
</html>
原理:
作者: Alan Pearce
原文: Multi-Column Layouts Climb Out of the Box
地址:
http://alistapart.com/articles/multicolumnlayouts
我们都了解拥有相同高度的布局是很麻烦的事，有很多相关资料提到过相关设计方法，所以在这我就不多做解释了。
最近在研究一个两个栏目的动态布局，每个栏目背景不同。我立刻想起了Dan Cederholm的Faux Columns，但我仍然需要一个动态布局的方法。我又看了完美布局的文章One
True Layout，但是有很多bug，需要许多注释和程序。甚至考虑用JavaScrip来实现栏目始终保持同一高度，但是不行。绝望之余，几乎要用
table布局，不，一定还有更好的方法。我想着一个问题“盒子外面是什么”，border！如果我可以使“sidebar”（或"rail"）的div
相对与“content”的div浮动，就可以实现多栏目相同高度。这个方法在很多地方介绍过：Douglas
Livingstone的introduced
，Holly的extended John Bergevin的Position Is Everything。由one
true layout的方法发展而来，用更简洁清楚的代码实现了两个栏目的动态变化。下面是代码：
HTML:
给content div右加border，颜色宽度和rail一样，并相对与rail浮动。Margin:-150px;使rail
div移到margin腾出的空间。如果content div变的比rail div
高，border随content div变高。视觉效果就是好像rail div也在变高。container的颜色设定和content
div一样，如果rail div达到最高，container随之变高，这样就给我们content变高的效果。
看看效果。See it in action
。试改变字体大小，布局随之变化。
3个栏目：3个颜色
3个栏目的布局有点不同:直接给container div加border.
HTML:
中间的栏目margin-right:-150px
使左边的rail div始终沿中间栏目的左沿浮动，使旁边栏目在真确的位置显示。还有一些方法可以实现，但这个方法最好，更易实现流动布局（动态布局）。
因为边栏在container div外，浮动在border上。使用overflow:
hidden使之隐藏：IE不支持，Firefox可以实现。边栏不需要设置颜色，它会于container
div的颜色保持一致。
流动布局
了解定宽布局之后，我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽，很多浏览器不支持border:**%的属性。但是我门可以使中间栏目自适应。
CSS:
#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:150px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-right:150px solid #f00;
margin-right:-150px;
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
margin-right:-150px;
}
3个栏目自适应布局
方法简单，不需要引用图片，没有BUG.
HTML:
<div id="container">
<div id="center">Center Column Content</div>
<div id="leftRail">Left<br /> Sidebar</div>
<div id="rightRail">Right Sidebar</div>
</div>
CSS:
body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
效果:
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;
charset=gb2312" /> <title>css</title> <style type="text/css"> <!-- body{ margin:0 100px; padding:0 200px 0 150px; } #container{ background-color:#0ff; float:left; width:100%; border-left:150px solid #0f0; border-right:200px solid #f00; margin-left:-150px;
margin-right:-200px; display:inline; /* So IE plays nice */ } #leftRail{ float:left; width:150px; margin-left:-150px; position:relative; } #center{ float:left; width:100%; margin-right:-100%; } #rightRail{ float:right; width:200px; margin-right:-200px; position:relative;
} --> </style> </head> <body> <div id="container"> <div id="center">Center Column Content</div> <div id="leftRail">Left<br /> Sidebar</div> <div id="rightRail">Right Sidebar</div> </div> </body> </html>
<div id="container">
<div id="center">CENTER<br />COLUMN CENTER</div>
<div id="leftRail">LEFT RAIL</div>
<div id="rightRail">RIGHT RAIL</div>
</div>
CSS:
#container{
background-color:#0ff;
float:left;
width:500px;
border-left:150px solid #0f0; »
/* The width and color of the left rail */
border-right:200px solid #f00; »
/* The width and color of the right rail */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:500px;
margin-right:-500px;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
<div id="container">
<div id="content">This is<br />some content</div>
<div id="rail">This is the rail</div>
</div>
CSS:
#container{
background-color:#0ff;
overflow:hidden;
width:750px;
}
#content{
background-color:#0ff;
width:600px;
border-right:150px solid #f00; »
/* The width and color of the rail */
margin-right:-150px; /* Hat tip to Ryan Brill */
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
}
代码如下：
<script type="text/javascript">
<!--
window.onload=window.onresize=function(){
if(document.getElementById("mm2").clientHeight<document.getElementById("mm1").clientHeight){
document.getElementById("mm2").style.height=document.getElementById("mm1").offsetHeight+"px";
}
else{
document.getElementById("mm1").style.height=document.getElementById("mm2").offsetHeight+"px";
}
}
-->
</script>
（注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；我测试在IE6.0/IE7.0下通过，考虑绝大数人仍然用的是IE，所以并没有在opera和firefoxs下调试，哪位用的是opera或ff。）
2、纯CSS方法
css里代码（调试通过，但不会显示div下边框，即border-bottom）：
/*左右自适应相同高度start*/
#m1,#m2
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#m1,#m2
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#m1:before, #m2:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/*左右自适应相同高度end*/
3、加背景图片
这个方法，很多大网站在使用，如163，sina等。
XHTML代码：
<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
CSS代码:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
无JS方法二:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css</title>
<style type="text/css">
<!--
body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="center">Center Column Content</div>
<div id="leftRail">
<p>Left<br />
Sidebar</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="rightRail">Right Sidebar</div>
</div>
</body>
</html>
原理:
作者: Alan Pearce
原文: Multi-Column Layouts Climb Out of the Box
地址:
http://alistapart.com/articles/multicolumnlayouts
我们都了解拥有相同高度的布局是很麻烦的事，有很多相关资料提到过相关设计方法，所以在这我就不多做解释了。
最近在研究一个两个栏目的动态布局，每个栏目背景不同。我立刻想起了Dan Cederholm的Faux Columns，但我仍然需要一个动态布局的方法。我又看了完美布局的文章One
True Layout，但是有很多bug，需要许多注释和程序。甚至考虑用JavaScrip来实现栏目始终保持同一高度，但是不行。绝望之余，几乎要用
table布局，不，一定还有更好的方法。我想着一个问题“盒子外面是什么”，border！如果我可以使“sidebar”（或"rail"）的div
相对与“content”的div浮动，就可以实现多栏目相同高度。这个方法在很多地方介绍过：Douglas
Livingstone的introduced
，Holly的extended John Bergevin的Position Is Everything。由one
true layout的方法发展而来，用更简洁清楚的代码实现了两个栏目的动态变化。下面是代码：
HTML:
给content div右加border，颜色宽度和rail一样，并相对与rail浮动。Margin:-150px;使rail
div移到margin腾出的空间。如果content div变的比rail div
高，border随content div变高。视觉效果就是好像rail div也在变高。container的颜色设定和content
div一样，如果rail div达到最高，container随之变高，这样就给我们content变高的效果。
看看效果。See it in action
。试改变字体大小，布局随之变化。
3个栏目：3个颜色
3个栏目的布局有点不同:直接给container div加border.
HTML:
中间的栏目margin-right:-150px
使左边的rail div始终沿中间栏目的左沿浮动，使旁边栏目在真确的位置显示。还有一些方法可以实现，但这个方法最好，更易实现流动布局（动态布局）。
因为边栏在container div外，浮动在border上。使用overflow:
hidden使之隐藏：IE不支持，Firefox可以实现。边栏不需要设置颜色，它会于container
div的颜色保持一致。
流动布局
了解定宽布局之后，我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽，很多浏览器不支持border:**%的属性。但是我门可以使中间栏目自适应。
CSS:
#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:150px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-right:150px solid #f00;
margin-right:-150px;
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
margin-right:-150px;
}
3个栏目自适应布局
方法简单，不需要引用图片，没有BUG.
HTML:
<div id="container">
<div id="center">Center Column Content</div>
<div id="leftRail">Left<br /> Sidebar</div>
<div id="rightRail">Right Sidebar</div>
</div>
CSS:
body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
效果:
运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;
charset=gb2312" /> <title>css</title> <style type="text/css"> <!-- body{ margin:0 100px; padding:0 200px 0 150px; } #container{ background-color:#0ff; float:left; width:100%; border-left:150px solid #0f0; border-right:200px solid #f00; margin-left:-150px;
margin-right:-200px; display:inline; /* So IE plays nice */ } #leftRail{ float:left; width:150px; margin-left:-150px; position:relative; } #center{ float:left; width:100%; margin-right:-100%; } #rightRail{ float:right; width:200px; margin-right:-200px; position:relative;
} --> </style> </head> <body> <div id="container"> <div id="center">Center Column Content</div> <div id="leftRail">Left<br /> Sidebar</div> <div id="rightRail">Right Sidebar</div> </div> </body> </html>
<div id="container">
<div id="center">CENTER<br />COLUMN CENTER</div>
<div id="leftRail">LEFT RAIL</div>
<div id="rightRail">RIGHT RAIL</div>
</div>
CSS:
#container{
background-color:#0ff;
float:left;
width:500px;
border-left:150px solid #0f0; »
/* The width and color of the left rail */
border-right:200px solid #f00; »
/* The width and color of the right rail */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:500px;
margin-right:-500px;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
<div id="container">
<div id="content">This is<br />some content</div>
<div id="rail">This is the rail</div>
</div>
CSS:
#container{
background-color:#0ff;
overflow:hidden;
width:750px;
}
#content{
background-color:#0ff;
width:600px;
border-right:150px solid #f00; »
/* The width and color of the rail */
margin-right:-150px; /* Hat tip to Ryan Brill */
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 左右两个div高度自动一致,自适应高度
- 左右两个div高度自动一致,自适应高度
- 转载--左右两个div高度自动一致
- div如何实现左右两个panel并排，而且高度一致
- 关于div自适应高度/左右高度自适应一致的js代码
- 关于div自适应高度/左右高度自适应一致的js代码
- div如何实现左右两个panel并排，而且高度一致
- 关于DIV高度自适应屏幕、左右高度自适应一致的js
- css+div自动适应高度，在IE和firefox下都能适应 (左右DIV自适应高度)
- div左右自适应高度一致
- 左右两个div高度自适应
- DIV+CSS左右两列自适应高度的方法
- 两个div自适应高度js解决
- DIV+CSS左右列高度自适应问题
- jquery让两个div高度自动适应 不用再看别的方法了 这个最简单
- div自适应高度--左右一直
- DIV+CSS左右两列自适应高度
- div 自适应高度 自动填充剩余高度
- 基于jQuery实现左右div自适应高度完全相同实现代码
- 左右两栏div布局，高度自适应