CSS：带边框的 div 内的 100% 高度/宽度 DIV 创建垂直滚动条，但不创建水平滚动条
您好，感谢您的聆听。这对我来说不是一个紧迫的问题，我只是好奇为什么下面的代码会执行它的操作。我想要在可见页面周围有一个边框（或边距），以及一个嵌套的 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 中，为什么我会得到一个垂直滚动条，但没有水平滚动条？看起来第二个 DIV 中的 100% 高度没有考虑第一个 DIV 的内容框（尊重 5px 边框），而是考虑整个 BODY 内容框。然而，对于 100% 宽度，事情按照我想象的那样工作——没有水平滚动条出现。
有人可以启发我吗？这是历史性的浏览器行为吗？
在 FredWilson 的回答之后编辑：如果你给 BODY 绝对尺寸 'height:100px; width:100px' 结果保持不变：垂直边框延伸 100px 高度，但水平边框被包含在内。我尝试重新阅读 CSS 规范 的小字，但是到目前为止，我没有看到高度和宽度处理之间有任何区别。
左：Firebug 中的 BODY 标签；右：Firebug 中的第一个 DIV 标签。
Hello and thanks for listening. This is not an urgent question for me, I'm just curious about why the following code does what it does. I wanted to have a border (or margin) around the visible page, and a nested DIV where "100% height and width" refers to the inside of that border (for further nesting).
<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>
Obviously I (think to) know the box-model and what 100% means (here: the content box of the first DIV), and I know how to solve the problem using absolute positioning.
But what I don't understand: In Chromium as well as in Firefox, why do I get a vertical scrollbar but no horizontal one? It looks like the 100% height in the second DIV does not take into account the content box of the first DIV (respecting the 5px border), but rather the whole BODY content box. For 100% width however, things work as I thought they would - no horizontal scrollbar appears.
Can someone enlighten me? Is this historic browser behaviour?
EDIT after FredWilson's answer: If you give the BODY absolute dimensions 'height:100px; width:100px' the result stays the same: The vertical border extends the 100px height, but the horizontal border gets included. I try to reread the small print of the CSS spec but so far, I don't see any difference between height and width handling.
Left: BODY tag in Firebug; right: First DIV tag in Firebug. 
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
要了解其意图的最简单方法是打开 Chrome 的开发人员工具并检查 BODY 和 DIV 标记。请注意，在我的示例中，chrome 显示的 BODY 宽度和 div 宽度为 297px。但是，BODY 高度为 275px，DIV 为 285px。
这告诉我们，Chrome 会计算边框设置并从框中的其他位置删除该空间，这并不奇怪。同时，Chrome 毫无疑问地尊重高度，这就是为什么你会得到垂直滚动条。
我无法引用任何官方消息来源，但这是我的经验。铬和Firefox 假定 width:100% 仅用于填充视口，因此它们会适当调整框内容。
然而，由于高度需要考虑许多其他变量，并且高度在任何意义上都是很难计算的，因此两种浏览器都会退回到精确的 CSS 定义。
从技术上讲，两种浏览器都应该使用您的代码生成水平滚动条。他们没有这样做很可能是因为供应商在尽可能多的情况下做了他们认为开发人员可能想要的事情。
编辑：
TL;DR 在这种情况下，宽度计算依赖于 quirksmode 来工作。设置严格的文档类型会产生一系列新的问题，例如需要将 html 高度和宽度设置为 100%，并确保链中的每个 DOM 元素都是 100% 高度和宽度。您还将拥有两个滚动条，因为 DOM 将受到尊重。
The easiest way to see how this is intentional is to open Chrome's Developer Tools and inspect the BODY and DIV tags. Note that chrome shows the BODY width and the div width to be 297px in my example. However, the BODY height is 275px and the DIV is 285px.
What this tells us, and is no surprise, is that Chrome calculates the border setting and removes that space from somewhere else in the box. At the same time, Chrome respects the height without question which is why you get a vertical scrollbar.
I can't cite any official sources, but this has been my experience. Chrome & Firefox assume that width:100% is intended to only fill the viewport and so they adjust the box content appropriately.
However, since there are so many other variables to consider for height, and since height is a difficult thing to calculate in any sense, both browsers fall back to the exact CSS definitions.
Technically, both browsers should produce a horizontal scroll bar with your code. That they do not is most likely because the vendors did what they thought the developer probably intended in as many cases as possible.
Edit:
TL;DR The width calculation relies on quirksmode to work in this case. Setting a strict doctype will create a new set of issues, such as needing to set html height and width to 100% and making sure that 100% height and width is on every DOM element in the chain. You will also have both scrollbars since the DOM will be respected.