logo标签列表

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

csshtmlpositioning
3

在我正在制作的页面中，有许多嵌套在一起的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都有height: 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 是我的最后希望！

2
你应该提供一个能够工作的问题示例... - Axel
1
尝试在http://jsfiddle.net/上模拟这个问题并将其链接。这将有助于我们看到您的问题。 - Ben
2个回答
0

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

0

我发现自己遇到了同样的问题。

在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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接