Tom Jardine-Smith Tom Jardine-Smith - 3 months ago 17
CSS Question

Responsively fill initial screen with a div, then scroll as normal

I'm trying to build a site with an initial 'landing page' look that you'd then scroll down from to see the rest of the content.

I can easily create a div that will fit the screen on the device I'm currently using, but how can I code for other devices of different screen sizes?

I've tried using '100%' which of course works initially but then continues to fill the screen when you scroll. I've tried defining a specific aspect ratio but again, that will only work for the screen I'm working on.

To be clear, I want the div, or img to fill the screen when a user first lands, then when the user scrolls the div/img should move up with the rest of the page.

I want to achieve this using only HTML or CSS.

Thanks in advance for any tips!

Answer

This'll do the trick:

.full-page-container {
    width: 100vw;
    height: 100vh;
}

vw and vh units represent a percentage of the viewport size. Hence 100vh will mean 100% of the viewport height and won't be affected by scrolling.