即使高度设置为 100%,内容也会溢出
Content overflows even though height is set to 100%
我知道在 CSS 中有很多关于 height: 100%
的讨论,但我有一个相当直接的讨论。观察这个小fiddle:https://jsfiddle.net/gkcm1bu7/.
共有三个元素,html
、body
和div
。它们的高度都设置为 100%
。这按预期工作:
但是如果我降低视口的高度,使得内容放不下,出现垂直滚动条,内容似乎溢出了它的父容器:
谁能解释一下为什么会这样以及如何解决这个问题?我已经为这种行为弄乱了很长一段时间,这真的很令人沮丧。在 body 上设置 min-height: 100%
可以解决这个问题,但在重要的布局中会产生其他问题。
评论中提到了这一点,但我检查了您的 fiddle 并将 overflow:hidden;
添加到 div CSS 解决了问题。
这是因为当您将 html
、body
和 div
的高度设置为 100% 时,您设置为参考视口(浏览器 window).当视口高度调整到它的最小高度并且内容更大时,它会溢出它的容器。您可以通过设置 overflow property to a number of different values 来解决这个问题。
我在下面选择将其设置为自动:
body,
div {
height: 100%;
}
html {
background-color: #eee;
height: 50px; /*I have set this to 50px to show off how overflow works*/
}
body {
background-color: #999;
margin: 0;
padding: 0;
}
div {
overflow-y: auto;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="app">
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
</div>
</body>
</html>
我知道在 CSS 中有很多关于 height: 100%
的讨论,但我有一个相当直接的讨论。观察这个小fiddle:https://jsfiddle.net/gkcm1bu7/.
共有三个元素,html
、body
和div
。它们的高度都设置为 100%
。这按预期工作:
但是如果我降低视口的高度,使得内容放不下,出现垂直滚动条,内容似乎溢出了它的父容器:
谁能解释一下为什么会这样以及如何解决这个问题?我已经为这种行为弄乱了很长一段时间,这真的很令人沮丧。在 body 上设置 min-height: 100%
可以解决这个问题,但在重要的布局中会产生其他问题。
评论中提到了这一点,但我检查了您的 fiddle 并将 overflow:hidden;
添加到 div CSS 解决了问题。
这是因为当您将 html
、body
和 div
的高度设置为 100% 时,您设置为参考视口(浏览器 window).当视口高度调整到它的最小高度并且内容更大时,它会溢出它的容器。您可以通过设置 overflow property to a number of different values 来解决这个问题。
我在下面选择将其设置为自动:
body,
div {
height: 100%;
}
html {
background-color: #eee;
height: 50px; /*I have set this to 50px to show off how overflow works*/
}
body {
background-color: #999;
margin: 0;
padding: 0;
}
div {
overflow-y: auto;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="app">
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
<p>sometext</p>
</div>
</body>
</html>