如何防止子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的高度溢出？

回答

相关问题