2011-01-10 64 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