100％高度无法调整浏览器大小

Question

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 .

Answer 1

add this to your HEAD section

<meta name="viewport" content="width=device-width, initial-scale=1">

then in your CSS:

html, body{
  height:100%;
}
@-ms-viewport{
  width: device-width;
}

Additionally, I'd suggest to use vh (viewport height) and vw (viewport width). Read more here