DIV布局自适应高度解决方案

HTML+CSS, 转自点点 7 年前 回复

, , ,

问题:用WordPress的朋友应该知道,在做主题的时候,边栏和正文的背景不能同步高度。

解决:

1、如果#content,#sidebar在#container里面,那么直接设置#container的背景,其他两个都透明,这样从视觉上可以达到对齐效果。

2、使用JQ。

html部分:

<div id="content">
<div class="cleft">
    <!-- 页面内容 -->
</div>
<div class="cright">
    <!-- 页面内容 -->
</div>
</div>

JQ部分:

$(document).ready( function() {
var h1 = $(".cleft").height();
var h2 = $(".cright").height();
         
if(h1 < h2){
$(".cleft").height(h2);
}else {
$(".cright").height(h1);
}
});

这个我测试过,挺好用的。

Via:http://hi.baidu.com/joeycih/item/f7d3f39e7ac2acdd1f427121

3、 容器溢出部分隐藏和列的负底边界和正的内补丁相结合,什么意思,我也不懂。

  先看代码:

#wrap{
overflow: hidden;
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}

  实现原理:

  块元素必须包含在一个容器里。

  应用overflow: hidden 到容器里的元素。

  应用 padding-bottom(足够大的值)到列的块元素 。

  应用margin-bottom(足够大的值)到列的块元素。

  padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。

貌似这个方法兼容性问题很严重。

Via:http://www.warting.com/web/201012/24509.html

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)

1498