Question

我有一个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;
}

Answer 1

不要给#all一个高度
清除你的花车

当子项浮动时，您的包装器无法确定高度。你需要一个“结束”浮动的元素。 <div style='clear:both'></div>是清除花车的常用方法。 Clearfix是另一种技术。

了解详情：http://css-tricks.com/all-about-floats/

Answer 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。

CSS部分自动调整高度？

2 个答案: