How to make a div cover the whole screen

html css responsive

Kevin · May 18, 2016 · Viewed 39.3k times · Source

I have a question.

I got this so far:

I basically want the highlighted div to cover your device screen no matter how big the device screen is. now i see 2 different divs when i open this on my phone. i only want to see the one that is highlighted. How do I achieve this?

Thanks in advance, kevin

Answer

You could use viewport height as your height value:

.main {
    height: 100vh;
    background-color: green;
}

<div class="main">
  CONTENT
</div>

Using height: 100vh means the element in question always be 100% height of the viewport a user / devie has.

More info: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

How to make a div cover the whole screen

Answer

Related questions