CSS Hack
Meta的http-equiv属性详解
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下测试。个人认为这个方法比较完善）事实上，这种办法真正意义上实现了两侧等高，并且能让两侧中任一侧去自由去适应另一侧，但是其缺点就在于，只有当DOM加载完成后，才有会这样等高的效果，如果网速够快，这个漏洞可以忽略不计。
效果：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
演示下载：attachment.php?fid=244
下载文件 (已下载 57 次)
2、纯CSS方法（两种）
1）、 负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合
css里代码（IE下测试通过，但不会显示div下边框，即border-bottom）：
2）、 用absolute设置一个足够高的高度，在父级元素中清除溢出的部分,具体的代码如下：
<style>
#container{font-size:14px;width:300px;overflow:hidden;border:3px solid gray;margin:10px auto 0;color:#fff;position:relative;}
#leftSide{background:#f50;width:100px;float:left;position:absolute;height:200000px;}
#rightSide{width:190px;float:right;text-align:center;background:purple;}
</style>
<div id="container">
<div id="leftSide">这边的高度自适应右侧的高度</div>
<div id="rightSide">
<script type="text/javascript">
for(i=0;i<10;i++){
document.write(i+'<br>');
}
</script>
</div>
</div>
其实这种方法并没有真正的实现左右两个div等高，只是用了障眼法，利用container的overflow:hidden清除了左侧多余的部分，以达到视觉上左右等高的目的，虽然有“白猫黑猫，逮着老鼠就是好猫”的说法，但是笔者并不着重推荐这种方法，因为给父级元素添加relative，会带来很多不必要的麻烦，况且只能是设置absolute的一侧自适应另一侧的高度，并不能让两侧中任一侧去自由去适应另一侧！
3、加背景图片
这个方法，很多大网站在使用，如163，sina等。
XHTML代码：
CSS代码:
最后编辑： 我就是个世界 编辑于April 16, 2011 16:54
我们经常会碰到左右两个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下测试。个人认为这个方法比较完善）事实上，这种办法真正意义上实现了两侧等高，并且能让两侧中任一侧去自由去适应另一侧，但是其缺点就在于，只有当DOM加载完成后，才有会这样等高的效果，如果网速够快，这个漏洞可以忽略不计。
效果：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
演示下载：attachment.php?fid=244
下载文件 (已下载 57 次)2、纯CSS方法（两种）
1）、 负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合
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*/
2）、 用absolute设置一个足够高的高度，在父级元素中清除溢出的部分,具体的代码如下：
<style>
#container{font-size:14px;width:300px;overflow:hidden;border:3px solid gray;margin:10px auto 0;color:#fff;position:relative;}
#leftSide{background:#f50;width:100px;float:left;position:absolute;height:200000px;}
#rightSide{width:190px;float:right;text-align:center;background:purple;}
</style>
<div id="container">
<div id="leftSide">这边的高度自适应右侧的高度</div>
<div id="rightSide">
<script type="text/javascript">
for(i=0;i<10;i++){
document.write(i+'<br>');
}
</script>
</div>
</div>
其实这种方法并没有真正的实现左右两个div等高，只是用了障眼法，利用container的overflow:hidden清除了左侧多余的部分，以达到视觉上左右等高的目的，虽然有“白猫黑猫，逮着老鼠就是好猫”的说法，但是笔者并不着重推荐这种方法，因为给父级元素添加relative，会带来很多不必要的麻烦，况且只能是设置absolute的一侧自适应另一侧的高度，并不能让两侧中任一侧去自由去适应另一侧！
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;}
相关日志
解决IE6、IE7、Firefox兼容最简单的CSS Hack
DIV＋CSS中最简单的布局（标题靠左，时间靠右，不需要浮动！）
IE HACK - CSS布局参考IE的If条件注释
CSS属性中Display与Visibility的区别
别让广告拖慢你的网页速度：巧妙处理广告代码，加速显示网页内容
解决IE6、IE7、Firefox兼容最简单的CSS Hack
DIV＋CSS中最简单的布局（标题靠左，时间靠右，不需要浮动！）
IE HACK - CSS布局参考IE的If条件注释
CSS属性中Display与Visibility的区别
别让广告拖慢你的网页速度：巧妙处理广告代码，加速显示网页内容
最后编辑： 我就是个世界 编辑于April 16, 2011 16:54
