100vh cuts off content when window height is small

user_8402074 0
Viewed 4282

Using 100vh for the first section so #section-1 and it's contents cover the whole viewport.

Problem example: when the window is at 300px, upon scroll, the green background is no longer there and the content is still at the full 100vh.

I think it might have to do with some css properties having px units or maybe it's because of the animations but I'm not sure.

Can someone please help me figure out why?

#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 -->

css
1 Answers

I think you may be misunderstanding the vh unit. It refers to the height of the viewport (the inside of the browser window), not the height of the document.

When the window (viewport) height is 300px, the #section1 element with the green background will also be 300px tall (since it's defined as 100vh).

What's happening in your example is that the content inside of the #section1 element overflows the height of the #section1 element, because the rest of the content is taller than your viewport. To fix this, I would recommend letting the #section1 element grow if it needs to by using min-height: 100vh instead of height: 100vh on it.

user_22347420
Related