CSS：100％ - 高度/宽度边界div内的DIV创建垂直滚动条，但不是水平滚动条

您好，非常感谢您倾听。这对我来说不是一个紧迫的问题，我只是好奇下面的代码为什么会这样做。我希望在可见页面周围有一个边框（或边距），以及一个嵌套的DIV，其中“100％高度和宽度”指向该边框的内部（以便进一步嵌套）。CSS：100％ - 高度/宽度边界div内的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>

很显然，我（觉得）知道盒模型，什么100％的机构（这里：第一DIV的内容框），我知道如何使用绝对定位来解决问题。

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

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

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

左：Firebug中的BODY标签;右图：Firebug中的第一个DIV标签。
BODY tag in Firebug First DIV tag in Firebug

来源

2011-03-03 cato_minor

你不能设置正文元素的border属性吗？我不知道，因为我从来没有用过这种方式。 – EarthMind 2011-03-03 19:35:46

不，这会使高度和宽度都大于当前窗口大小。我知道有解决方法，我只想了解为什么上面的代码片段会被解释为像这样:-) – 2011-03-03 19:41:04

就像我在下面说的，在第一张图片中，您的主体渲染@ 100px。在第二个图像中，你有内部div将外部div高度推到100％（身体）。浏览器仍然计算边框并在正文外部呈现外部div 10px。可能没有多大意义，但DOM像这样很有趣。 – 2011-03-03 21:51:46

看不出这是故意的，最简单的方法是打开Chrome的开发者工具和检查身体和DIV标签。请注意，在我的示例中，chrome显示BODY宽度和div宽度为297像素。但是，身体高度是275px，DIV是285px。

这告诉我们，是毫不奇怪的是，Chrome的计算边界设置，并从其他地方在盒子的空间。同时，Chrome尊重高度而不会产生问题，这就是为什么你需要一个垂直滚动条。

我不能引用任何官方消息，但这是我的经验。 Chrome & Firefox假定宽度：100％仅用于填充视口，因此它们会适当调整框内容。

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

从技术上讲，两个浏览器应该产生与您的代码水平滚动条。他们不这样做的原因很可能是因为供应商尽可能多地做了他们认为开发者可能打算采用的内容。

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

来源

2011-03-03 20:28:00

很好的解释。我宁愿让事情做我说*做的事，而不是他们认为我打算做的事。如果我想做** X **，但是我说错了，我想让它变得错误，所以我学会了正确的方法。 – 2011-03-03 20:42:47

不错的截图，谢谢！ Firebug向我展示了同样的东西。但是，当您将BODY的尺寸更改为绝对值时，例如，100像素宽度和100像素高度（比窗口尺寸小得多）时，内部DIV将具有90x100的内容框。 BODY仍然有100x100，但正如Firebug所显示的，它不会覆盖整个区域。将会看到我可以如何上传像你的截图... – 2011-03-03 20:59:49

@cato_minor - Stackoverflow的编辑器有一个图像图标。只需点击该图标并从磁盘上传图像即可。我认为，即使你像你一样设置身体，同样的问题仍然适用。在这种情况下，正文呈现@ 100px，外部div（带边框）正在填充100％+边界，总共为110px。 Firefox和Chrome尊重垂直div设置。 – 2011-03-03 21:42:27

CSS：100％ - 高度/宽度边界div内的DIV创建垂直滚动条，但不是水平滚动条

回答

相关问题