内容来自 div 容器不知道该怎么做答案

【问题标题】：Content is coming out of div container not sure what to do内容来自 div 容器不知道该怎么做
【发布时间】：2021-02-07 14:33:21
【问题描述】：

在网络编程方面还是个新手，我似乎无法弄清楚为什么我的内容总是从我的 div 中流出。当我放大按钮时，标题在其容器之外流动在这里你可以在 codepen 上看到我的代码：

https://codepen.io/roger-matadeen/pen/PozWVVE
这里是我的html

/* Removes All Margin and Padding from elements  */

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration:underline;
}

.navbar {
  display: grid;
  min-height: 100px;
  grid-auto-flow: column;
  grid-gap: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.logo {
  display: grid;
  justify-content: center;
  align-content: center;
}

.links {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-content: center;
  grid-gap: 20px;
  font-size: 20px;
}

.header{
  background-image: url("https://cdn.pixabay.com/photo/2016/04/30/20/41/banner-1363794_960_720.jpg");
  display: flex;
  border: 1px solid black;
  width: 100vh;
  flex-direction: row;
  margin: auto;
  background-repeat: no-repeat;
  justify-content: center;
  align-content: center;
  padding: 40px;
  color: white;
}

.hero {
display: flex;
  flex-direction: column;
  height: 70vh;
  width: 80vh;
  background-image: url("https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/rm233-eye-02.jpg?w=1300&dpr=1&fit=default&crop=default&q=80&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=b625852b7057993e0983ec35ceb8e4b3");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: auto;
  align-items: center;
  color: white;
  padding-top:20px;
  justify-content: center;
  flex-flow: row wrap;
}

.hero-title {
  align-items: center;
  text-align: center;
  font-size: 30px;
}

button {
  background-color: black;
  color: white;
  border-radius: 2px;
  padding: 10px;
  margin-top: 25px;
  justify-content: center;
}

button:hover {
  color: red;
}

/* margin property auto: horizontally center the element within its container. */

<div class="navbar">
  <div class="logo"><h1>LOGO</h1></div>
    <div class="links">
      <a href="">Home</a>
      <a href="">About</a>
      <a href="">Contact</a>
      <a href="">Account</a>
      <a href="">Product</a>
    </div>
</div>
<section class="hero">
  <header class="hero-title">
    <h1>FIND THE PRODUCTS OF YOUR DREAMS!</h1>
    <h1>Happiness guranteed!</h1>
    <button>
      <h1>Shop Now!</h1>
    </button>
  </header>
</section>

谁能指导我正确的方向:)

【问题讨论】：

请通过截图详细说明：目前看起来不错：nimb.ws/6mVogc
刚刚发了一个截图，按钮不在div里了

标签： html css flexbox grid

【解决方案1】：

首先，您只需在 codepen HTML 部分中插入 <body> 内部的内容。

出现问题是因为您将 height: 70vh 设置为 .hero。
因此，无论.hero 内部的内容相对于视口高度（vh）如何大，.hero 始终是其高度的 70%。

例如，要解决此问题，您可能需要设置 height: auto。

【讨论】：

非常感谢！！这就是解决这个问题的方法，我什至不知道你能做到这一点。
很高兴它有帮助！是的，CSS 充满了惊喜 :)