即使高度设置为 100%，内容也会溢出

Question

我知道在 CSS 中有很多关于 height: 100% 的讨论，但我有一个相当直接的讨论。观察这个小fiddle：https://jsfiddle.net/gkcm1bu7/.

共有三个元素，html、body和div。它们的高度都设置为 100%。这按预期工作：

但是如果我降低视口的高度，使得内容放不下，出现垂直滚动条，内容似乎溢出了它的父容器：

谁能解释一下为什么会这样以及如何解决这个问题？我已经为这种行为弄乱了很长一段时间，这真的很令人沮丧。在 body 上设置 min-height: 100% 可以解决这个问题，但在重要的布局中会产生其他问题。

Answer 1

评论中提到了这一点，但我检查了您的 fiddle 并将 overflow:hidden; 添加到 div CSS 解决了问题。

Answer 2

这是因为当您将 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>

即使高度设置为 100%，内容也会溢出

Content overflows even though height is set to 100%

html

css

styles

height