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

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:

<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 topDiv is set to a percentage, under which scenario I can't simply set the max-height value of insideDiv to an appropriately smaller value. Also, setting the overflow property on topDiv to hidden doesn't work - the extra content in insideDiv is simply completely hidden then, not accessible by scrolling.

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

How can I limit the height of insideDiv to not exceed the height of topDiv, with insideDiv scrolling any extra content as needed?

如何限制insideDiv的高度不超过topDiv的高度,insideDiv根据需要滚动任何额外的内容?

4 个解决方案

#1

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

您可以将#insideDiv的max-height CSS属性从100%更改为继承。所以这个规则将是这样的:

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 #insideDiv to 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-height for 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%;寻找父母的身高,而不是它允许的高度的最大高度。因此,您最终得到了经典的非确定性相对高度问题。如果您给父母一个确定的高度(而不是最大高度),100%可以确定性地解决。

#2

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

尝试这个flexbox布局,它可以在固定或百分比高度/最大高度下正常工作。

jsFiddle

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>

#3

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.

然后,您可以将max-height值修改为您想要的任何值,它们将按预期工作。

#4

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 JSFiddle with the code as well.

这是一个带有代码的JSFiddle。

#1