Question

Jsfiddle显示问题：https://jsfiddle.net/ibrewster/g6v2x7ku/12/

请注意粉红色div如何扩展到蓝色div的边界之外。

我正在尝试制作一个简单的布局，其中我有两个嵌套的div扩展到一定高度（在这种情况下需要100％的窗口高度），内部div根据需要滚动以显示其他内容。因此，如果内容很短，则div全部折叠到内容的大小，但如果它很长，它们只会扩展到一个点，此时内部div应该滚动。

HTML：

<div id="topDiv">
  <div id="insideDiv">
    Some inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br>
  </div>
</div>

CSS：

html,
body {
  height: 100%;
}

#topDiv {
  background-color: lightblue;
  max-height: 50px;
  width: 100%;
  padding: 10px;
}

#insideDiv {
  background-color: pink;
  max-height: 100%;
  overflow-y:auto;
}

请注意，如果topDiv的最大高度设置为百分比，效果是相同的，在这种情况下我不能简单地将insideDiv的最大高度值设置为适当的价值较小。此外，将overflow上的topDiv属性设置为隐藏不起作用 - insideDiv中的额外内容完全隐藏，然后无法通过滚动访问。

如何将insideDiv的高度限制为不超过topDiv的高度，insideDiv根据需要滚动任何额外内容？

Answer 1

您可以将#insideDiv的{{1}} CSS属性从max-height更改为100%。所以这个规则将是这样的：

inherit

如果你走这条路线，你也可能想要添加max-height: inherit;，因为这将允许box-sizing:border-box;上的任何边框或填充表现为（可能）所需的。

此问题的原因是，#insideDiv会查找父级max-height:100%;，而不是height查看其允许的高度max-height。因此，您最终得到了经典的非确定性相对高度问题。如果您向父母提供确定性height（而不是max-height），则100%可以确定性地解决。

Answer 2

您需要将overflow-y:auto;移至#topDiv

然后，您可以将最大高度值修改为您想要的任何值，它们将按预期工作。

Answer 3

基于我对您的问题的理解。这段代码应该可以正常使用！

html,
body {
  height: 100vh;
  width: 100%
  padding: 0px;
  margin: 0px;
}

#topDiv {
  padding: 10px;
  background-color: lightblue;
  width: calc (100% - 20px);
  max-height: calc(100vh - 20px);
}

#insideDiv {
  width: calc (100% - 40px);
  background-color: pink;
  max-height: inherit;
  overflow: scroll;
}

<div id="topDiv">
  <div id="insideDiv">
    Some inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br>
  </div>
</div>

这里还有JSFiddle代码。

Answer 4

只有一行答案，如果您应用max-height和overflow属性，请不要忘记将position:relative赋予同一元素！

这就是帮助我的原因。

防止儿童div在父母之外扩张？

4 个答案: