Why is 100vh treating me like this?

Design help General
1

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

FSoAHFfWIAAl4Ct
FSoAHFfWIAAl4Ct2165×1440 360 KB

FSoAHFgWUAQdhlF
FSoAHFgWUAQdhlF2170×1440 365 KB

link: https://preview.webflow.com/preview/dddss-superb-site?utm_medium=preview_link&utm_source=dashboard&utm_content=dddss-superb-site&preview=8969697c495fe58ba0e56c3d101d3e0d&workflow=preview

2

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
3

That is enormously helpful. Thanks

1 Like
4

Great and glad to be of some help.

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