CSS部分自动调整高度？

我有一个包含两个其他部分的HTML部分“all”。我无法让网站根据我放入其他两个部分的内容的长度来调整“全部”部分的高度。CSS部分自动调整高度？

<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; 
}

来源

2012-04-17 Takkun

将#all height设置为自动。和溢出：隐藏; – 2012-04-17 17:52:20

是为你工作.. – 2012-04-17 18:00:29

我试过这个，是的它做我在找什么。我很抱歉没有提到这一点，但left_content和right_content的高度不一样，所以下面的解决方案导致了很大的差距。此解决方案需要两个高度中较大的一个，并正确填充#all背景。 – Takkun 2012-04-17 18:03:18

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

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

来源

2012-04-17 17:45:11

通过清除我的花车，你的意思是什么？ – Takkun 2012-04-17 17:48:34

查看我上面的编辑。 – 2012-04-17 17:53:26

删除了#ALL高度声明（如Diodeus说）。然后，您需要应用两个内容div（如页脚）下方的清除元素，或者将一个clearfix应用于div #all。

例如：

/* For modern browsers */ 
#all:before, 
#all:after { 
    content:""; 
    display:table; 
} 

#all:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
#all { 
    zoom:1; 
}

这是Nicolas Gallagher's excellent micro clearfix直接复制粘贴&。

来源

2012-04-17 17:52:58 chipcullen

CSS部分自动调整高度？

回答

相关问题