使标题 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

导航的上边距为 50 像素。

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

标头设置为height: 100vh。

所以，你会得到一个溢出，因为：100vh + 50px > 100%。

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