Question

在我正在布局的页面上，有一堆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 {
    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：滚动和高度：继承，我尝试过max-height：100％，我正在撕开我的头发。 Stackoverflow是我心脏病发作前的最后希望！

Answer 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没有继承固定位置吗？或者也许一个未被注意的类添加了属性？

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

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

2 个答案: