Html 防止子div扩展到父级之外？

Prevent child div from expanding outside of parent?

提问by ibrewster

Jsfiddle showing the issue: https://jsfiddle.net/ibrewster/g6v2x7ku/12/

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

Note how the pink div expands beyond the boarders of the blue div.

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

I'm trying to make a simple layout where I have two nested divs that expand up to a certain height (100% of the window height is desired in this case), with the inner div scrolling as needed to show additional content. So if the content is short, the divs all collapse down to the size of the content, but if it is long they only expand to a point, at which time the inner div should scroll.

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

The HTML:

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>

And the CSS:

和 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;
}

Note that the effect is the same if the max-height of topDivis set to a percentage, under which scenario I can't simply set the max-height value of insideDivto an appropriately smaller value. Also, setting the overflowproperty on topDivto hidden doesn't work - the extra content in insideDivis simply completely hidden then, not accessible by scrolling.

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

How can I limit the height of insideDivto not exceed the height of topDiv, with insideDivscrolling any extra content as needed?

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

回答by Arkoudinos

You can change your #insideDiv's max-heightCSS property from 100%to inherit. So this rule will be like this:

您可以将您#insideDiv的max-heightCSS 属性从更改100%为inherit。所以这条规则将是这样的：

max-height: inherit;

max-height: inherit;

You also might want to add box-sizing:border-box;if you go this route, as that will allow any borders or padding on #insideDivto behave as (probably) desired.

box-sizing:border-box;如果您走这条路线，您可能还想添加，因为这将允许任何边框或填充#insideDiv按照（可能）期望的方式运行。

---

---

The cause of this issue is that max-height:100%;looks for the parent's height, not its max-heightfor how tall it's allowed to be. Thus, you end up with the classic non-deterministic relative height problem. If you give the parent a deterministic height(rather than max-height), 100%can resolve deterministically.

这个问题的原因是max-height:100%;寻找父母的height，而不是它max-height允许的高度。因此，您最终会遇到经典的非确定性相对高度问题。如果你给父一个确定性height（而不是max-height），100%可以确定性地解决。

回答by Stickers

Try this flexbox layout, it works fine with either fixed or percentage height / max-height.

试试这个 flexbox 布局，它适用于固定或百分比高度/最大高度。

jsFiddle

js小提琴

html, body {
  height: 100%;
  margin: 0;
}
#topDiv {
  background-color: lightblue;
  max-height: 50%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
#insideDiv {
  background-color: pink;
  overflow-y: auto;
}

<div id="topDiv">
  <div>
    No scroll content
  </div>
  <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>
  </div>
</div>

回答by Blake Neal

You need to move overflow-y:auto;to #topDiv

你需要移动overflow-y:auto;到#topDiv

You can then modify your max-height values to whatever you want for either and they will work as expected.

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

回答by Emmet Arries

Based on my understanding of your question. This code should work very well!

根据我对你的问题的理解。这段代码应该工作得很好！

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>

Here's a JSFiddlewith the code as well.

这里还有一个带有代码的JSFiddle。