Full-Screen Section with One-line of CSS

Hello, I recently shared the story of how I became a Web Developer if you haven’t read it, here is the link.

So today, I want to share a CSS one-liner solution that you might not know about, This solution makes use of CSS unit vh to create a Full-Screen section of a page ( e.g Header ).

• So WTF is vh???

According to MDN docs:

— Viewport Height (vh) – A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height.

With this, we know that 1vh is equalled to 1% of the visible part of the user browser (Viewport). We are going to use it with min-height to make sure the section is Full no matter the content size.

.full-screen {

min-height: 100vh;

}

And Here is the pen for those curious folks like myself 😃😃😃

Thanks for reading ❤️️❤️️ , and i think the next thing should be……