CSS：带边框的 div 内的 100%-height/width DIV 创建垂直滚动条，但不是水平滚动条答案

【问题标题】：CSS: 100%-height/width DIV inside a bordered div creates vertical, but not horizontal scrollbarsCSS：带边框的 div 内的 100%-height/width DIV 创建垂直滚动条，但不是水平滚动条
【发布时间】：2011-07-08 06:43:13
【问题描述】：

您好，感谢您的收听。这对我来说不是一个紧迫的问题，我只是好奇为什么下面的代码会这样做。我想在可见页面周围有一个边框（或边距），以及一个嵌套的 DIV，其中“100% 高度和宽度”指的是该边框的内部（用于进一步嵌套）。

<html>
  <body style='height:100%; width:100%; margin:0;'>
    <div style='border:5px solid green'>
      <div style='height:100%; width:100%;'>
      </div>
    </div>
  </body>
</html>

显然我（想）知道盒子模型和 100% 的含义（这里：第一个 DIV 的内容框），并且我知道如何使用绝对定位来解决问题。

但我不明白的是：在 Chromium 和 Firefox 中，为什么我得到一个 vertical 滚动条但没有 horizontal 滚动条？看起来第二个 DIV 中的 100% 高度没有考虑第一个 DIV 的内容框（尊重 5px 边框），而是整个 BODY 内容框。然而，对于 100% 的宽度，事情就像我想象的那样工作 - 没有出现水平滚动条。

有人可以启发我吗？这是历史性的浏览器行为吗？

EDIT 在 FredWilson 的回答之后：如果你给 BODY 绝对尺寸 'height:100px; width:100px' 结果保持不变：垂直边框扩展了 100px 高度，但包含了水平边框。我尝试重新阅读the CSS spec 的小字，但到目前为止，我没有看到高度和宽度处理之间的任何区别。

左：Firebug 中的 BODY 标记；右：Firebug 中的第一个 DIV 标记。

【问题讨论】：

不能给body元素设置border属性吗？我不知道，因为我从来没有那样用过。
不，这会将高度和宽度都推到大于当前窗口大小。我知道有解决方法，我只是想了解为什么上面的 sn-p 会像这样被解释:-)
就像我在下面所说的，在你的第一张图片中，你的身体渲染@100px。在第二张图片中，您让内部 div 将外部 div 高度推到 100%（身体的）。浏览器仍然计算边界并将外部 div 渲染到 body 之外 10px。可能没有多大意义，但 DOM 就是那样有趣。
我完全同意你的看法，只是想补充一点，“小”DIV 和 BODY 也会发生这种情况。（如果你用额外的 DIV 替换 BODY 尺寸，也会发生同样的事情。）现在我只是想知道高度和宽度处理之间的这种差异是否只是不同渲染引擎暴露的“常见行为”，或者它是否在规范中的某个地方定义?
我从未在规格中找到它，相信我，我已经看过了！按照我阅读规范的方式，在这种情况下我们也应该得到水平滚动条。有趣的是，我们如何让 div 溢出 BODY 元素，但并不令人惊讶。

标签： html height border css

【解决方案1】：

了解这是如何故意的最简单方法是打开 Chrome 的开发者工具并检查 BODY 和 DIV 标签。请注意，在我的示例中，chrome 显示 BODY 宽度和 div 宽度为 297px。但是，BODY 高度为 275px，DIV 为 285px。

这告诉我们并且不足为奇的是，Chrome 会计算边框设置并从框中的其他位置删除该空间。同时，Chrome 毫无疑问地尊重高度，这就是您获得垂直滚动条的原因。

我无法引用任何官方消息来源，但这是我的经验。 Chrome 和 Firefox 假定 width:100% 仅用于填充视口，因此它们会适当地调整框内容。

但是，由于高度需要考虑很多其他变量，而且高度在任何意义上都很难计算，因此两种浏览器都回退到确切的 CSS 定义。

从技术上讲，两个浏览器应该在您的代码中生成一个水平滚动条。他们没有这样做很可能是因为供应商在尽可能多的情况下做了他们认为开发人员可能打算做的事情。

编辑： TL;DR 在这种情况下，宽度计算依赖于 quirksmode。设置严格的 doctype 会产生一系列新问题，例如需要将 html 的高度和宽度设置为 100%，并确保链中的每个 DOM 元素都具有 100% 的高度和宽度。您还将拥有两个滚动条，因为 DOM 会受到尊重。

【讨论】：

很好的解释。我宁愿让事情按照我说去做，而不是按照他们认为我的意图去做。如果我想做X，但我说错了，我希望它是错，所以我学习正确的方法。
漂亮的截图，谢谢！ Firebug 向我展示了同样的情况。但是当您将 BODY 的尺寸更改为绝对值时，例如 100px 宽度和 100px 高度，一个比您的窗口大小小得多的区域，内部 DIV 将有一个 90x100 的内容框。 BODY 仍将具有 100x100，但正如 Firebug 所示，它不会覆盖整个区域。看看我如何上传像你这样的屏幕截图......
@cato_minor - Stackoverflow 的编辑器有一个图像图标。只需单击它并从磁盘上传您的图像。我认为即使您像以前那样设置身体，同样的问题仍然存在。在这种情况下，主体正在渲染@ 100px，外部 div（带边框）填充 100% + 边框，总共 110px。 Firefox 和 Chrome 尊重垂直 div 设置。
我的帐户太新鲜了，我还不能使用那个图标:-)