内容来自 div 容器不知道该怎么做
Posted
技术标签:
【中文标题】内容来自 div 容器不知道该怎么做【英文标题】：Content is coming out of div container not sure what to do 【发布时间】：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里了 【参考方案1】：首先，您只需在 codepen HTML 部分中插入 <body> 内部的内容。 出现问题是因为您将 height: 70vh 设置为 .hero。 因此，无论.hero 内部的内容相对于视口高度（vh）如何大，.hero 始终是其高度的 70%。 例如，要解决此问题，您可能需要设置 height: auto。
【讨论】：
非常感谢！！这就是解决这个问题的方法，我什至不知道你能做到这一点。 很高兴它有帮助！是的，CSS 充满了惊喜 :)以上是关于内容来自 div 容器不知道该怎么做的主要内容，如果未能解决你的问题，请参考以下文章