CSS：100％-height / width DIV在有边框内创建垂直但不是水平滚动条

时间：2011-03-03 18:28:02

标签： html height border css

您好，感谢收听。这对我来说不是一个紧迫的问题，我只是好奇为什么下面的代码做了它的工作。我希望在可见页面周围有一个边框（或边距），以及一个嵌套的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绝对尺寸的高度：100px; width：100px'结果保持不变：垂直边框延伸100px高度，但包含水平边框。我尝试重新阅读the CSS spec的小字，但到目前为止，我看不出高度和宽度处理之间有任何区别。

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

1 个答案:

答案 0 :(得分：1)

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

Showing Body Showing Div

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

我不能引用任何官方消息来源，但这是我的经验。 Chrome＆amp; Firefox假设宽度：100％仅用于填充视口，因此它们会相应地调整框内容。

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

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

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

相关问题
最新问题