CSS部分自动调整高度?

时间:2012-04-17 17:40:25

标签: html css html5

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

2 个答案:

答案 0 :(得分:7)

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

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

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

答案 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