Question

我从边缘获得了奇怪的行为。即使我没有靠近底部的位置，也会出现垂直滚动条。我认为这是理想的行为，考虑到我测试了这一点并在最新版本的Chrome，IE11和Firefox中得到了相同的结果。

以下代码会生成滚动条

<html>
<head>
<style>
body { 
    margin: 0;
    height: 100%;
    padding: 1px;
}

div {
    margin: 15px;
}    
</style>
</head>
<body>
<div>Hmm</div>
</body>
</html>

将body padding更改为0.1px会导致无保证金。将body padding 0px更改为box-sizing: border-box也会产生余量。此外，只要body不为零，只需将padding添加到{{1}}即可删除滚动条。

我还没有添加小提琴，因为我无法在那里复制它。你需要在一个简单的html文件中测试它。

这实际上是预期的行为吗？有没有合理的解释为什么他们这样实现呢？

Answer 1

看起来您看到滚动条的原因是定义height和设置padding值的组合。 height属性指示元素内容的高度，不包括添加到该值的边距和填充。添加填充后会出现滚动条，因为您已将元素高度的内容设置为页面的100％加上填充，导致元素的整个高度溢出。

此外，将box-sizing应用于元素会使height和width属性包含padding。有趣的是，它不包括margin。所以如果你申请：

body {
  box-sizing: border-box,
  margin: 1px,
  padding: 0
}

你仍然会看到滚动条。一旦理解了元素的height属性，默认情况下，只指示元素内容的高度，它就会更有意义。

希望这会有所帮助：）

Answer 2

将正文的高度设置为100％会使其占据其父元素的所有高度，即html元素。 html元素的宽度和高度依次由它所在的窗口控制。添加边距或边框会增加可用空间之外的尺寸，从而引起滚动。然而，另一个问题是向div添加边距会使身体向下推动15px。这与折叠边距有关。查看https://stackoverflow.com/a/2680515/6184852了解更多信息。

保证金和填充行为

2 个答案: