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

【问题标题】：How do I prevent a child div from overflowing beyond the height of the parent div?如何防止子 div 溢出超出父 div 的高度？
【发布时间】：2013-03-08 19:43:23
【问题描述】：

在我正在布局的页面上，有一堆 div 相互塞入。 HTML 代码如下所示：

<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，使用固定位置，如下：

#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 的底部。我试过溢出-y：滚动和高度：继承，我试过最大高度：100%，我把头发扯掉了。 Stackoverflow 是我心脏病发作前的最后希望！

【问题讨论】：

您应该提供您的问题的工作示例...
尝试在jsfiddle.net 上模拟这个问题并链接到它。这将有助于我们了解您的问题。

标签： css html positioning

【解决方案1】：

我更改并添加了一些属性，因为没有提供完整的源代码（颜色仅用于识别相关块）。在我看来，错误一定是在你的 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没有继承固定位置吗？或者可能是一个未被注意到的类添加了该属性？

【讨论】：

【解决方案2】：

我发现自己也有同样的问题。

在 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>

【讨论】：