子div的高度溢出父容器

我們需要爲div的溢出文本設置一個垂直滾動條。問題是當我們將高度設置爲100％並溢出爲auto時，由於前面的另一個同級分區，它會擴展到其父容器之外。下面是一個例子：子div的高度溢出父容器

<style type="text/css"> 
    .container {height: 100px; width: 100px; border: solid;} 
    .titlebar {height: 2em; background: gray;} 
    .app-body {height: 100%; overflow: auto; background: lightblue;}  
</style> 

... 

<div class="container"> 
    <div class="titlebar"></div> 
    <div class="app-body">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl.</div> 
</div>

app-body設定爲100％，則它以具有100像素的高度，這使得它溢出超出container由2em底部。我們儘量不使用高度爲app-body，但導致它在沒有滾動條顯示的情況下溢出。

我知道我們可以將高度設置爲較小的百分比或固定數量的像素，但是如果字體大小發生變化，這會對我們造成問題。如果100% - 2em的高度有效，那麼這將是我們試圖定義的有效方法。

來源

2010-02-01 Lightbeard

嘗試此，設定該應用體定位到絕對，然後固定頂部3EM，其餘爲0：

<style type="text/css"> 
    .container {height: 100px; width: 100px; border: solid; 
     position: relative;} 
    .titlebar {height: 2em; background: gray; 
     position: relative;} 
    .app-body {height: auto; overflow: auto; background: lightblue; 
     position: absolute; top: 2em; left: 0; right: 0; bottom: 0;}  
</style>

PS：上FF3.6，IE8，WebKit瀏覽器以上測試。

來源

2010-02-01 02:38:34

-2

您可以設置.container溢出：隱藏，像這樣：

<style type="text/css"> 
.container {height: 100px; width: 100px; border: solid;overflow: hidden;} 
</style>

希望這有助於

來源

2010-02-01 04:44:56 Said

子div的高度溢出父容器

回答

相關問題