在第一部分中使用100vh,因此#section-1及其内容覆盖了整个视口。
问题示例:当窗口为300px时,滚动时,绿色背景不再存在,内容仍为100vh。
我认为这可能与某些具有px单位的css属性有关,或者可能是由于动画所致,但我不确定。
有人可以帮我找出原因吗?
#section-1 {
background-color: #58b038;
color: #fff;
text-align: center;
height: 100vh;
margin: 0 auto;
padding-bottom: 30px;
}
.container {
max-width: 960px;
margin: auto;
padding: 30px 30px;
}
#showcase {
height: 200px;
}
#showcase h1 {
font-size: 50px;
line-height: 50px;
text-transform: uppercase;
font-weight: bold;
position: relative;
animation: heading;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes heading {
0% {
top: -50px
}
100% {
top: 100px;
}
}
#showcase-img {
max-width: 300px;
margin: 0 auto;
}
#about {
position: relative;
animation-name: about;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes about {
0% {
left: -1000px
}
100% {
left: 0px;
}
}
#about a {
text-decoration: none;
color: #fff;
font-size: 40px;
margin: 0 10px;
}
#about p {
line-height: 30px;
font-size: 20px;
}
.button {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 10px 20px;
border: #fff 1px solid;
margin: 15px 7px;
border-radius: 4px;
opacity: 0;
animation-name: btn;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes btn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.button:hover {
background-color: #fff;
color: #58b038;
text-decoration: none;
transition: all 0.5s ease;
}
<div id="section-1">
<header id="showcase">
<h1>Showcase</h1>
</header>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" alt="Profile" id="showcase-img">
<div id="about" class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis natus maiores eum magni ab modi aspernatur quibusdam distinctio blanditiis nesciunt libero itaque, id, iure, quo.</p>
<a href="#" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
</div>
<a href="#" class="button">Button</a>
<a href="#" class="button">Button</a>
</div>
<!-- section-1 ends -->
最佳答案
我认为您可能会误解vh
单元。它指的是视口的高度(浏览器窗口的内部),而不是文档的高度。
当窗口(视口)的高度为300px时,绿色背景的#section1
元素也将为300px高(因为其定义为100vh)。
在您的示例中发生的是,#section1
元素内的内容超出了#section1
元素的高度,因为其余内容比视口还高。要解决此问题,如果需要,我建议让#section1
元素通过使用min-height: 100vh
而不是height: 100vh
来增长。