时间戳

首页 > 解决方案 > 内容来自 div 容器不知道该怎么做

html - 内容来自 div 容器不知道该怎么做

问题描述

在网络编程方面仍然很新，我似乎无法弄清楚为什么我的内容总是从我的 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>

谁能指导我正确的方向：）

标签： htmlcssflexboxgrid

解决方案

首先，您只需要从<body>in codepenHTML部分中插入内容。

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

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

推荐阅读