溢出：隐藏在div和body上，行为不同

小编典典

溢出：隐藏在div和body上，行为不同

css

鉴于此html：

<body>
  <div id="a"></div>
  <div id="b"></div>
</body>

我要#b填充其容器块的所有剩余垂直空间，我从这里开始：

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

#b100％的高度也是如此，这意味着它正在采用其父容器块的高度500px，即问题是overflow: hidden;似乎没有起作用，#b未被裁剪。

另一方面，如果我换行#a并#b使用另一个具有与上述相同属性的div，则将body得到所需的结果：

#wrap {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

与此HTML当然：

<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div>
</body>

我的问题是为什么div并且body似乎具有相同属性的不同行为？没有包装，有没有办法获得相同的效果？

具有相同属性的两个jsFiddles产生不同的结果。这是为什么？

阅读 677

2020-05-16

共1个答案

小编典典

该overflow属性具有某些特定于HTMLhtml和body元素的特殊行为，这些行为在CSS2.1规范中进行了描述。这些特殊情况适用于在正常情况下在整个页面上更改溢出设置的情况，因此作者只需要在html或上设置它body，而不是在两者上都设置。

在这种情况下，当您应用overflow:hidden到时body，它实际上会影响视口，而不是影响视口body（您可以通过调整预览窗格的大小以使其更短来看到它-滚动条不会出现在预览窗格本身上）。这会导致#b正常溢出的身体，即使你给它一个固定的高度使用小于的总和#a和#b。换句话说，就好像您从未将它放在身体上一样。

但是，如果您将设置overflow为visibleon
以外的其他html值，则会导致视口使用给html而不是提供的值body，从而使声明保持body不受影响，并使其行为与包装器相同：

html {
  overflow: auto;
}

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

2020-05-16