故事博客

听说分享~
一个有意思的博客!

div+css 子div高度自适应父div高度

div+css 子div高度自适应父div高度

故事发生时间: 2012-04-30 / 故事分类: 网站相关 / 1个小故事 我也要讲故事 编辑本文

今天做模板的时候遇到一个问题,就是子DIV的高度如何自适应父div的高度,实现纵向平铺的的背景可以填满整个区域的问题.

有问题的模板结构代码如下

<div class="both">
    <div class="left">左侧<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
    <div class="right">右侧<br /><br /><br /><br /><br /><br /><br /><br /></div>
</div>

其中写上多个BR是为了查看两个子div高度不同的时候他们的高度是如何展现的.结果如下所示.

div+css-子div高度自适应父div高度.png

当左侧div的高度大于右侧的时候,父div的高度随之升高,而右侧的div高度没有随着父div的高度而增高,所以右侧侧边div背景没有达到满意的效果.尝试了下height:100%;结果无效.

最后的结局方法是,给父div也即both添加一个overflow:hidden;属性,再给两个子div,left和right添加两个属性分别是,padding-bottom:2000px;margin-bottom:-2000px;达到了满意的效果如下图.

div+css-子div高度自适应父div高度解决方法1.png

其中的2000px可以根据你的父div的高度自行调节或者直接设置个10000px.

分享到: 更多()