100% Height Not Working On Browser Resizing

Vote count:

0

I'm building an alternative to fullPage.js which will fit my needs better, but I'm having some issues getting the sections to stay at 100% height when the browser is being resized.

I have 5 sections that should all be height: 100%, width: 100% at all times. You should only be able to get one section in your browser viewport at a time. I did this using anchors attached to each section id. Then the body has overflow: hidden to prevent vertical scrolling. The sections each contain images that should also take up height: 100% with the width being determined automatically to keep aspect ration of images.

This solution works when I first load the page, but as soon as the browser starts being resized, other sections become visible, and the img's that have a height: 100% become much smaller than the full browser height. Is this is a limitation to CSS, or am I doing something wrong?

Is there a javascript solution to detect browsers viewport, and apply those height and width values to a series of id'?

Here is my codepen.

asked 1 min ago

Matt Beckman

52

100% Height Not Working On Browser Resizing