Question

html,
body {
  height: 100vh;
}

body {
  margin: 0px;
}

footer {
  height: 50px;
}

.page-wrap {
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  position: relative;
  background: black;
  top: 0;
  left: 0;
  margin: 50px;
}

.content {
  min-height: calc(100% - 50px);
}

<div class="page-wrap">
  <header>

  </header>
  <div class="content">

  </div>
  <footer>

  </footer>
</div>

使用此代码，身体始终比视口高，但为什么？我还看到设置.page-wrap上的任何边距似乎在身体上创建了一个滚动条，即使.page-wrap的高度设置为(calc: 100% - 100px); - 我想我应该在之前有100px的边距滚动条出现，但即使是1px也会导致主体变得比视口长..

Answer 1

你有margin collapsing使.page-wrap的边距转到父（身体），并且由于身高是100vh，因为添加了额外的边距，你将拥有滚动。 / p>

您可以在提供的链接中阅读：

如果没有边框，填充，内联部分，块格式化上下文创建或清除以分隔块的 margin-top 第一个子区块的 margin-top ;或没有边框，填充，内联内容，高度，最小高度或最大高度来分隔从最后一个孩子的边缘底部开始的一个块的底部，那些利润率崩溃。 折叠的保证金最终会超出 的父

还有：

这些规则甚至适用于零的边距，因此a的边距 第一个/最后一个孩子在其父母之外结束（根据规则以上）父母的保证金是否为零。

您可以向正文添加一个小填充，行为将被删除，您将解决问题：

＆＃13;
＆＃13;
html, body { height: 100vh; box-sizing:border-box; } body { margin: 0px; padding-top:1px; /*added this */ } footer { height: 50px; } .page-wrap { width: calc(100% - 100px); height: calc(100% - 100px); position: relative; background: black; top: 0; left: 0; margin: 50px; } .content { min-height: calc(100% - 50px); }
＆＃13;
<div class="page-wrap"> <header> </header> <div class="content"> </div> <footer> </footer> </div>
＆＃13;
＆＃13;
＆＃13;

更有用的链接：

What is the point of CSS collapsing margins?

How do I uncollapse a margin?

为什么这个页面滚动？

1 个答案: