Question

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

有三个元素html，body和div。所有这些都将其高度设置为100%。这按预期工作：

但如果我减小视口的高度，以便内容不适合并且出现垂直滚动条，则内容似乎溢出其父容器：

有谁能解释一下为什么会发生这种情况以及如何解决这个问题？我一直在为这种行为搞砸了很长一段时间，这真的令人沮丧。在正文上设置min-height: 100%可以解决此问题，但在非平凡的布局中会产生其他问题。

Answer 1

这是因为当您将html，body和div的高度设置为100％时，您将设置为引用视口（浏览器窗口）。当视口高度调整到它的最小高度并且内容更大时，它会溢出它的容器。您可以通过设置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>

Answer 2

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

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

2 个答案: