如何防止子div超出父div的高度溢出？

在我正在鋪設的頁面上，有一堆互相粘在一起的div。 HTML代碼看起來是這樣的：如何防止子div超出父div的高度溢出？

<div id="overlay"> 
<div id="main_section"> 
    <div class="left">yadda yadda left sidebar</div> 
    <div class="middle"> 
    <div id="header">yadda yadda header</div> 
    <div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div> 
    </div> 
    <div class="right">yadda yadda right sidebar</div> 
    <div class="clear"></div> 
</div> 
</div>

主容器是重疊的，而且它使用固定的位置，就像這樣：

#overlay { 
    position: fixed; 
    width: 100%; height: 90%; 
    top: 0px; left: 0px; 
    background-color: rgba(255,255,255,0.5); 
}

（我用分層各級不透明的多背景，這就是爲什麼有main_section，overlay等）

現在，所有的孩子使用相對定位，這相當好。問題出現在#main_content中。 #main_section和.middle的高度均爲100％，並且正如預期的那樣，它們一直下降到#overlay的底部。現在，這裏的#main_content：

#main_content { 
    position: relative; 
    height: 100%; 
    width: 70%; 
    overflow-y: auto; 
    text-align: right; 
}

這不工作，我希望它，因爲由於圖像大小的東西一直延伸到頁面的底部，而不是到#overlay的底部。我已經嘗試過overflow-y：scroll和height：inherit，我試過max-height：100％，並且我把我的頭髮拉出來。 Stackoverflow是我心臟病發作前的最後希望！

來源

2013-03-19 principal

你應該提供您的問題的工作示例... – Axel 2013-03-19 22:02:07

嘗試在http://jsfiddle.net/嘲諷了這個問題，並鏈接到它。這會幫助我們看到你的問題。 – Ben 2013-03-19 23:25:33

由於未提供完整的源代碼（僅用於識別相關塊的顏色），所以我更改並添加了一些屬性。在我看來，這個錯誤必須在你的CSS中的其他地方，因爲下面的代碼對我來說工作得很好。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    #overlay { 
     position: fixed; 
     width: 100%; 
     height: 90%; 
     top: 0px; 
     left: 0px; 
     background-color: blue; 
     border: 2px solid green; 
    } 
    #main_section { 
     width: 100%; 
     height: 100%; 
     background: yellow; 
    } 
    .middle { 
     height: 100%; 
     width: 100%; 
     background: lavender; 
     position: relative; 
    } 
    #main_content { 
     position: relative; 
     height: 100%; 
     width: 70%; 
     text-align: right; 
     overflow-y: auto; 
     background-color: red; 
    } 
    img { 
     width: 700px; 
     height: 2000px; 
     background-color: white; 
     border: 1px solid black; 
    } 
    </style> 
</head> 
<body> 
<div id="overlay"> 
<div id="main_section"> 
     <div class="left"></div> 
     <div class="middle"> 
      <div id="header"></div> 
      <div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div> 
     </div> 
     <div class="right"></div> 
     <div class="clear"></div> 
</div>

當我得到同樣的問題，因爲你是我設置這些#main_content {position:fixed;}或.middle {position:fixed;}唯一的一次。您確定#main_content或.middle未繼承固定位置嗎？或者，也許一個沒有注意到的類添加了該屬性？

來源

2013-03-20 01:51:52 Tyblitz

我發現自己有同樣的問題。

在SO上有相當類似的問題的答案。但我發現的只是在整個頁面/主體上工作，或者在容器上具有固定高度。一些使用浮動和定位（絕對或相對在這裏並不重要）。然而，總體的男高音是使用display元素，我發現它是最優雅和實用的。

以下是我的解決方案。你可以把它放在任何容器中。它將完全採用容器的高度和寬度，不會溢出。那麼你可以看到它只是將一個display: inline-block父母與一個display: table孩子結合在一起。

請注意，如果您添加display: table-caption，則會再次發生溢出（如果知道原因，請留下評論）。

<div id="#place_me_anywhere" 
    style="display: inline-block;width: 100%;height: 100%;"> 
    <div style="display: table;height: 100%;width: 100%;"> 
     <!--<div style="display: table-caption;"> 
      Height overflow will occur 
     </div>--> 
     <div style="display: table-row;"> 
      <h1>Heading</h1> 
     </div> 
     <div style="display: table-row;background-color: pink;height: 100%;"> 
      <!-- this row consumes all remaining height without overflow --> 
      <div style="display: table-cell;width: 10em;min-width: 10em;background-color: red;"> 
       Just an example of some fixed width column/cell 
      </div> 
      <div style="display: table-cell;background-color: blue;"> 
       takes the remaining width 
      </div> 
     </div> 

    </div> 

</div>

來源

2014-03-24 11:13:39

如何防止子div超出父div的高度溢出？

回答

相關問題