Html CSS:100%高度/宽度DIV在带边框的DIV中创建垂直滚动条，但不创建水平滚动条
您好，谢谢收听。这对我来说不是一个紧迫的问题，我只是好奇为什么下面的代码会这样做。我希望在可见页面周围有一个边框（或边距），以及一个嵌套的DIV，其中“100%高度和宽度”指的是该边框的内部（用于进一步嵌套）Html CSS:100%高度/宽度DIV在带边框的DIV中创建垂直滚动条，但不创建水平滚动条,html,height,border,css,Html,Height,Border,Css,您好，谢谢收听。这对我来说不是一个紧迫的问题，我只是好奇为什么下面的代码会这样做。我希望在可见页面周围有一个边框（或边距），以及一个嵌套的DIV，其中“100%高度和宽度”指的是该边框的内部（用于进一步嵌套） 显然，我（认为）知道盒子模型和100%的含义（这里是第一个DIV的内容框），我知道如何使用绝对定位来解决这个问题 但我不明白的是：在Chromium和Firefox中，为什么我得到的是垂直滚动条而不是水平滚动条？看起来第二个DIV中的100%高度没有考虑第一个DIV的内容框（关于5px
要了解这一意图，最简单的方法是打开Chrome的开发者工具并检查BODY和DIV标签。请注意，在我的示例中，chrome将主体宽度和div宽度显示为297px。但是，车身高度为275像素，DIV为285像素 这告诉我们一点也不奇怪，Chrome会计算边框设置，并从框中的其他位置删除该空间。同时，Chrome毫无疑问地尊重高度，这就是为什么会有一个垂直滚动条 我不能引用任何官方消息来源，但这是我的经验。Chrome和Firefox假设width:100%仅用于填充视口，因此它们会适当地调整框内容
然而，由于有很多其他的变量要考虑高度，并且由于高度在任何意义上都是很难计算的，所以两个浏览器都返回到确切的CSS定义。 从技术上讲，两种浏览器都应该在代码中生成一个水平滚动条。他们不这样做很可能是因为供应商在尽可能多的情况下做了他们认为开发人员可能想要做的事情
编辑：TL；DR在这种情况下，宽度计算依赖于quirksmode。设置严格的doctype将产生一组新问题，例如需要将html高度和宽度设置为100%，并确保链中的每个DOM元素上都有100%的高度和宽度。您还将拥有两个滚动条，因为DOM将受到尊重。您不能为body元素设置border属性吗？我不知道，因为我从来没有这样使用过。不，这使得高度和宽度都大于当前的窗口大小。我知道有一些解决办法，我只是想理解为什么上面的代码片段会被解释成这样：-）就像我在下面说的，在你的第一张图片中，你有身体渲染@100px。在第二幅图像中，内部div将外部div的高度推到100%（主体的）。浏览器仍会计算边框，并在主体外部渲染外部div 10px。可能没有什么意义，但DOM就是这样有趣。我完全同意你的观点，只是想补充一点，这种情况也发生在“小”div和body上。（如果你用一个额外的DIV替换主体尺寸，同样的事情也会发生。）现在我只是想知道，高度和宽度处理之间的差异是否只是不同渲染引擎暴露的一种“常见行为”，还是在规范中的某个地方定义的？我从来没有在规范中找到过，相信我，我已经看过了！按照我阅读规范的方式，在这种情况下，我们也应该得到水平滚动条。我们如何让div溢出BODY元素，这很有趣，但并不令人惊讶。很好的解释。我宁愿让事情按照我说的去做，而不是按照他们认为我的意图去做。如果我想做X，但我说错了，我希望它是错误的，所以我学习正确的方法。很好的截图，谢谢！萤火虫也给我看了。但是，当您将主体的尺寸更改为绝对值时，例如，100px宽度和100px高度，一个比窗口大小小得多的区域，内部DIV将有一个90x100的内容框。车身仍有100x100个，但正如Firebug所示，它不会覆盖整个区域。看看我如何上传像你这样的截图…@cato_minor-Stackoverflow的编辑器有一个图像图标。只需单击该按钮，然后从磁盘上载图像。我认为，即使你像现在这样建立了身体，同样的问题仍然适用。主体渲染为@100px，外部div（带边框）填充100%+边框，在本例中总计为110px。Firefox和Chrome尊重垂直div设置。我的帐户太新，我还不允许使用该图标：-）
<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>