尽管 div 高度 + 边距加起来为 100% [重复]，但 CSS 滚动条答案

【问题标题】：CSS scrollbar despite div height + margin adding up to 100% [duplicate]尽管 div 高度 + 边距加起来为 100% [重复]，但 CSS 滚动条
【发布时间】：2022-10-07 17:23:07
【问题描述】：

我不知何故忘记了我在这里做错了什么：
我得到了一个简单的内容<div>。
它有一个height 的100% - 30px 和一个margin-top 的30px，...所以它们加起来就是父元素高度的100%。
父元素是 height 设置为 100vh 的主体。没有边距，没有填充。
但是我仍然在右侧看到一个 y 滚动条。谁能给我解释一下，为什么会这样？

我在这里放了一个最小的例子来说明我的意思： https://jsfiddle.net/kemo8npa/4/

有人可以向我解释一下，为什么我得到滚动条？

html {
    margin: 0;
    padding: 0;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: purple;
}

.content {
  height: calc(100% - 30px);
  margin-top: 30px;
  background-color: blue;
  width: 300px;
}

<div class=\"content\">
  content
</div>

编辑：将示例更改为更小。

内容边距与正文边距一起折叠，因此您以 100vh + 30px 结尾

标签： html css margin positioning

【解决方案1】：

.inner 的 margin-top 在元素之外增加了 30px，所以总和又是 100% 的高度。

您可以改用padding-top。

【讨论】：

感谢您的回复，但这就是我的观点：边距+高度加起来为 100%，所以不应该有滚动条。标头是position: fixed，这意味着它应该在布局流之外并且不向其中添加任何内容。我做了一个更精简的示例，显示了我在这里不明白的内容：jsfiddle.net/kemo8npa/4 为什么我得到滚动条？哦