将 h1 添加到视口设置为 100 的 div

Question

我正在尝试创建一个 div，即 100 viewheight。在 div 里面放置了一个 h1。 h1 放大了 div 所以它不再是 100 viewheight。在下面的示例中，它不应该像现在这样有滚动条。我在此 question 上搜索了答案，但没有找到任何答案。

如何在不扩大 div 的情况下将 h1 元素添加到具有 100 viewheight 的 div？为什么放大了？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body style="margin: 0;">
  <div style="height: 100vh; background: yellow;">
    <p>Test</p>
  </div>
</body>

</html>

Answer 1

如果您不想要 div 的内容，请使用 overflow:hidden 它将删除滚动条，或者如果您想在 div 中显示，则使用 position

 div{position:relative}
 h1{position:absolute}

此定位将标注 h1 并显示在 div h1 之上且不会溢出

此外，您可以使用 display 属性

     div{display:flex;justify-content:space- 
      around;height:100vh}

    h1{ height:auto}

这将避免一行中的flex溢出。如果您不想使用 flex，只需在 h1 中使用 height:auto。它将占用其父项的最大宽度 div

将 h1 添加到视口设置为 100 的 div

Add h1 to a div with viewport set to 100

html

css

height