CSS Hack
30
Jun.2009
收藏到网摘：
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=logo}
两个DIV高度自适应解决方法汇总：
我们经常会碰到左右两个DIV高度不能自适应的问题，今天在这里整理一下各种解决方法：
网站优化（seo）中，提到过网站样式的优化，即在网站的布局设计中，采用DIV+CSS来布局。网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度（事先并不能确定哪列的高度）的相同，有以下几种方法：
1、JS实现（判断2个div高）；
2、纯css方法；
3、加背景图片实现。
div+css基本布局：
1、js实现div自适应高度
代码如下：
（注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；上面的代码在IE6.0/IE7.0/FF下通过，并没有在opera下测试。个人认为这个方法比较完善）
效果：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
演示下载：attachment.php?fid=244
下载文件 (已下载 35 次)
2、纯CSS方法
css里代码（IE下测试通过，但不会显示div下边框，即border-bottom）：
3、加背景图片
这个方法，很多大网站在使用，如163，sina等。
XHTML代码：
CSS代码:
最后编辑： 我就是个世界 编辑于July 1, 2009 13:34
我们经常会碰到左右两个DIV高度不能自适应的问题，今天在这里整理一下各种解决方法：
网站优化（seo）中，提到过网站样式的优化，即在网站的布局设计中，采用DIV+CSS来布局。网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度（事先并不能确定哪列的高度）的相同，有以下几种方法：
1、JS实现（判断2个div高）；
2、纯css方法；
3、加背景图片实现。
div+css基本布局：
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
1、js实现div自适应高度
代码如下：
<script type="text/javascript">
<!--
window.onload=window.onresize=function(){
if(document.getElementById("right").clientHeight<document.getElementById("left").clientHeight){
document.getElementById("right").style.height=document.getElementById("left").offsetHeight+"px";
}
else{
document.getElementById("left").style.height=document.getElementById("right").offsetHeight+"px";
}
}
-->
</script>
<!--
window.onload=window.onresize=function(){
if(document.getElementById("right").clientHeight<document.getElementById("left").clientHeight){
document.getElementById("right").style.height=document.getElementById("left").offsetHeight+"px";
}
else{
document.getElementById("left").style.height=document.getElementById("right").offsetHeight+"px";
}
}
-->
</script>
（注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；上面的代码在IE6.0/IE7.0/FF下通过，并没有在opera下测试。个人认为这个方法比较完善）
效果：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
演示下载：attachment.php?fid=244
下载文件 (已下载 35 次)2、纯CSS方法
css里代码（IE下测试通过，但不会显示div下边框，即border-bottom）：
/*左右自适应相同高度start*/
#left,#right
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#left,#right
{
padding-bottom: 0 !important;
margin-bottom: 0 !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;
}
}
/*左右自适应相同高度end*/
#left,#right
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#left,#right
{
padding-bottom: 0 !important;
margin-bottom: 0 !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;
}
}
/*左右自适应相同高度end*/
3、加背景图片
这个方法，很多大网站在使用，如163，sina等。
XHTML代码：
<div id="box">
<div id="left">这是第一列</div>
<div id="right">这是第二列</div>
<div class="clear"></div>
</div>
<div id="left">这是第一列</div>
<div id="right">这是第二列</div>
<div class="clear"></div>
</div>
CSS代码:
#box{ width:776px; background:url(bg.gif) repeat-y 300px;}
#left{ float:left; width:300px;}
#right{ float:right; width:476px;}
.clear{ clear:both;}
#left{ float:left; width:300px;}
#right{ float:right; width:476px;}
.clear{ clear:both;}
最后编辑： 我就是个世界 编辑于July 1, 2009 13:34
