How to make a div cover the whole screen

Question

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

Set body to `height:100%;width:100%` then `.textboxtransparent {height:100%;width:100%}` — Albzi, May 18 '16 at 09:16
Please share the code and create a fiddle showing the problem — Mr_Green, May 18 '16 at 09:17
Possible duplicate of [How to make a
always full screen?](http://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen) — Farside, May 18 '16 at 09:18
You can assign the height of viewport to `div` like `height: 100vh` — Pugazh, May 18 '16 at 09:18

score 30 · Accepted Answer · answered May 18 '16 at 09:25

30

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/

answered May 18 '16 at 09:25

David Wilkinson

5,060
1
18
32

@KevinAartsen happy to help! – David Wilkinson May 18 '16 at 09:35

score 6 · Answer 2 · answered May 18 '16 at 09:26

You can probably do that by setting the position of the div that you want to make fullscreen, to absoluteand then apply the below CSS.

top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;

Thus, the final css would be as follows

.fullscreen{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    height:100%;
    width:100%;
}

score 3 · Answer 3 · edited Aug 28 '23 at 07:41

You can use position: absolute; or position: fixed.
Use absolute for just making it cover the whole page.
Use fixed to make it nailed in a default position. If you use fixed, even though your page is more than 100% you cannot scroll down to see any other things.

CSS

div.any {
   position: absolute; /*position: fixed;*/
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*You can add anything else to this like image, background-color, etc.*/
}

HTML

<div class="any"></div>

score 1 · Answer 4 · edited Oct 24 '19 at 13:10

1

.video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: fill;
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

edited Oct 24 '19 at 13:10

Paul Roub

36,322
27
84
93

answered Oct 24 '19 at 13:03

Abhishek Meharia

171
2
4

How to make a div cover the whole screen

4 Answers4