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

【问题标题】：overflow: hidden on div and body, different behavior溢出：隐藏在 div 和 body 上，不同的行为
【发布时间】：2014-12-29 11:41:17
【问题描述】：

鉴于此 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：

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

jsFiddle 以 div 标签作为包装器：http://jsfiddle.net/2QWn3/

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

【问题讨论】：

我看不出你的两个例子之间有什么区别，这也许是重点，我猜 body 标签比 div 标签具有更基本的价值，每个浏览器都有自己的渲染方式等@Firefox 19.0.2

标签： css html overflow

【解决方案1】：

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

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

如果您在html 上将overflow 设置为除visible 以外的其他值，这会导致视口使用html 的值而不是body，从而将声明留在body不受影响并允许其行为方式与包装器相同：

html {
  overflow: auto;
}

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

jsFiddle preview

【讨论】：

【解决方案2】：

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

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

好吧，我想念你的创立，但我认为这是一个很好的编码习惯。

【讨论】：

【解决方案3】：

body元素被认为是主要的父元素，在浏览器窗口中显示的其他元素驻留在其中，因此宽度和高度属性不适用于它。根据最佳实践，最好创建一个 div 容器，如您在第二个示例中所做的 #wrapper。

【讨论】：