0

I hope you have a nice day.

Today I came to a strange thing. When I set the body to 100vh, it is supposed to take the height of the viewport, the screen height.

But when I create multiple elements with bigger height than my body and set their background to transparent, I still see my body under them.

body {
  margin: 0;
  height: 100vh;
  width: 100%;
  background: #000;
}
.home {
  width: 100%;
  height: 100%;
  background: lightblue;
}
.overflow {
  width: 100%;
  height: 100%;
  background: transparent;
}
<div class="home"></div>
<div class="overflow"></div>

You also have this codepen if you want to visualize it. https://codepen.io/Ziratsu/pen/ExjMpyO

Can someone explain to me why the body is still here while we scroll to another div who is supposed to overflow the body height ?

Thank you so much.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
J.doe
  • 115
  • 10
  • 2
    It works perfectly on my screen with chrome .. i can't see your problem, could you please add a screen-shoot ? – Ahmed Tag Amer Apr 01 '20 at 09:14
  • Just scroll down and you'll see the black color of the body underneath the blue one. But the body is supposed to be 100vh, not 200vh! – J.doe Apr 01 '20 at 09:22
  • 1
    html{background:something} --> it's background propagation, you need to set a background to html element to avoid this – Temani Afif Apr 01 '20 at 09:23

0 Answers0