Why is 100vh treating me like this?

This is the second project That I experience the same problem with vh


link: Webflow - Ddds's Superb Site

According to your implementation, you’ve set height to 100vh. Which is a fixed height that depends on the browser height.

But the content inside is getting larger than the browser height, so the content is overflowing.

Best thing is not to set any height for the parent if you think content inside can get larger.

But if you really need 100vh then make sure content inside doesn’t get too large. Also know that padding also takes the space inside.

Another thing you can do is, set min-height to 100vh. This way if the content is not too large parent height will remain 100vh and when the contents height gets too larger it’s height will be automatically increase depending on the content inside.

2 Likes

That is enormously helpful. Thanks

1 Like

Great and glad to be of some help.

If you do not have any queries regarding this topic, please mark it as solved.