2011-01-10 65 views
63

的容器DIV滚动条,我有以下的标记:CSS:如何让内部固定高度

<div class="FixedHeightContainer"> 
    <h2>Title</h2> 
    <div class="Content"> 
    ..blah blah blah... 
    </div> 
</div> 

的CSS是这样的:

.FixedHeightContainer 
{ 
    float:right; 
    height: 250px; 
    width:250px; 
} 
.Content 
{ 
    ??? 
} 

由于其内容的高度div.Content通常大于div.FixedHeightContainer提供的空间。目前,div.Content愉快地延伸出div.FixedHeightContainer的底部 - 根本不是我想要的。

如何指定div.Content当其高度太大而不适合时会获取滚动条(最好是垂直的,但我不挑剔)?

overflow:auto and overflow:scroll无所事事,有些离奇的原因。

回答

109

设置overflow应该照顾它,但是您还需要设置Content的高度。如果height属性没有设置,div将垂直增长,并且不需要滚动条。

参见示例: http://jsfiddle.net/ftkbL/1/

+0

好了 - 谢谢。所以我需要为div.Content指定一个高度?我认为它会从不适合的容器中运行,并在此基础上应用滚动条。 – David

+6

如果你给Content的一个固定高度,你不应该给FixedHeightContainer一个固定的高度,因为你不知道你的标题会有多高,所以'Content'可能被推出。请参阅:http://jsfiddle.net/ftkbL/2/您应该使用overflow:scroll设置元素的固定高度**。请参阅http://jsfiddle.net/ftkbL/3/或http://jsfiddle.net/ftkbL/4/ – RoToRa

+0

我从第一个链接看到您的观点,但标题文本已知并且太短而无法突破除非用户将文本膨胀到不切实际的大小。 – David