Question

鉴于此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%;
}

所以#b是100％高度，这意味着它正在取其父容器块的高度，即500px，问题是overflow: hidden;似乎不起作用，#b未被剪裁。

另一方面，如果我将#a和#b与另一个具有与上面body相同属性的div包裹起来，我会得到所需的结果：

#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的问题：

js使用body标签作为包装器：http://jsfiddle.net/3AMtG/

jsFile with div tag as wrapper：http://jsfiddle.net/2QWn3/

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

Answer 1

overflow属性具有特定于HTML的html和body元素的特定行为，这些行为在CSS2.1 spec中有所描述。这些特殊情况适用于在正常情况下适应整个页面上的更改溢出设置，因此作者只需在html或body上设置，但不能同时设置。

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

如果您将overflow设置为visible上html以外的其他内容，则会导致视口使用html而不是body的值因此，body上的声明不受影响，并允许它的行为与包装器相同：

html {
  overflow: auto;
}

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

jsFiddle preview

Answer 2

身体和div完全不同。在我的日常工作中，我喜欢像这样构建我的代码。

<div class='xxx-ctn'>
  <div class='xxx-inner'>
    <div class='data-wrapper'>
      [p|ul|ol|h1-h6|article|section].....
    </div>
  </div>
</div>

好吧，我错过了你的创始人，但我认为这是一个很好的编码习惯。

Answer 3

Body元素被视为主要的父元素，因此浏览器窗口中显示的其他元素都位于其中，因此width和height属性不适用于它。根据最佳实践，最好在第二个示例中创建一个像#wrapper这样的div容器。

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

3 个答案: