使标题为屏幕的100％

Question

我正在尝试使用height: 100vh;将标头部分设为视口的100％。但是不知何故，它溢出了。

查看devtools时，我发现此问题的原因来自我的导航栏。这是HTML的结构：

---body
------header
---------nav
-----------other div
----closing tags

这里是CSS：

* {
  padding: 0;
  margin: 0;
  border: 0;
  font-weight: normal;
  vertical-align: baseline;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
}

body {

  background: linear-gradient(90deg, #1b1f2a 1.2%, #191d28 1%) 1px 0, #fff;
  background-size: 240px 1px;
  overflow-x: hidden;
}


header {
  height: 100vh;
}

header nav {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 4fr 1fr;
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: "brand links email";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 95%;
  margin: 50px auto 30px auto;
  padding: 10px auto;
}

因此，如果我将标题导航顶部边距更改为0，则不会溢出。

这里是实际项目的链接：https://www.generationz.dev/projects/portfolio1/index.html

因此，澄清这个问题：如何将标头部分设置为视口的100％而没有任何溢出？

谢谢。

Answer 1

导航的最大边距为50px。

header nav {
  margin: 50px auto 30px auto;
}

标题设置为height: 100vh。

所以，您将因为以下原因而溢出：100vh + 50px > 100%。

您可以删除nav的上边距，或者使用height: 100vh代替标题上的height: calc(100vh - 50px)。还有其他选项，例如添加填充或边框。请参阅下面的MDN摘录。

尽管nav嵌套在header中，但由于边距折叠，nav的上边距在header之外呈现。

来自MDN：

掌握保证金崩溃

没有内容将父母与后代分开。

[如果没有边框，填充，内联部分，块格式化上下文创建或清除以将块的margin-top与margin-top其一个或多个后代块；或没有边界填充，内联内容，height，min-height或max-height到将块的margin-bottom与的margin-bottom分开它的一个或多个后代块，然后这些边距崩溃。 该边距缩窄最终在父级之外。

另一个边际崩溃示例：

• Why is an element with position: fixed moving with a non-positioned sibling?

Answer 2

在标题中添加float: left。然后，它将起作用

header {
  float: left;
  height: 100vh;
}