我有一个HTML部分“all”,它包含了另外两个部分。根据我放入其他两个部分的内容的长度,我无法让网站调整“全部”部分的高度。
<section id="all">
<section id="left_content">
<p>Something here.</p>
</section>
<section id="right_content">
<p>Something here.</p>
</section>
</section>
我目前的高度设置为固定大小700px。我想知道在CSS中是否可以使该部分的高度与left_content和right_content部分的大小相关。
#all {
width: 900px;
height: 700px;
margin: 0 auto;
padding-top: 20px;
background: #F4F4F4;
}
#left_content {
float: left;
width: 570px;
margin-top:-20px;
padding: 0px 20px 10px 20px;
line-height: 25px;
font-size: 12px;
}
#right_content {
border-left:4px solid #cccccc;
float: right;
width: 250px;
padding: 0px 10px 20px 20px;
line-height: 20px;
font-size: 12px;
}
答案 0 :(得分:7)
#all
一个高度当子项浮动时,您的包装器无法确定高度。你需要一个“结束”浮动的元素。 <div style='clear:both'></div>
是清除花车的常用方法。 Clearfix是另一种技术。
答案 1 :(得分:2)
删除#all的高度声明(如Diodeus所说)。然后,您需要在两个内容div(如页脚)下面应用清除元素,或者对div #all应用clearfix。
例如:
/* For modern browsers */
#all:before,
#all:after {
content:"";
display:table;
}
#all:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
#all {
zoom:1;
}
这是一份直接副本&amp;粘贴Nicolas Gallagher's excellent micro clearfix。