how to make a full screen div, and prevent size to be changed by content?

Question

for my web application, i would like the main div to be full screen (both width and height = 100%), and regardless of content, i want it to stay at that size. that means, if there are not much content, it shouldn't shrink, and if there are too much content, it shouldn't push this main div.

how can i do this?

(i'm ok with hacks applied to this div, as long as it will keep contents hack-free)

score 44 · Answer 1 · answered Jul 18 '10 at 16:17

44

Or even just:

<div id="full-size">
  Your contents go here
</div>

html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars */
}

(html, body can be set to like.. 95%-99% or some such to account for slight inconsistencies in margins, etc.)

answered Jul 18 '10 at 16:17

lucideer

3,842
25
31

This does not for me. (firefox) – Tomáš Zato Jan 15 '14 at 19:18
@TomášZato: Should work fine in Firefox. I've been using the same method with Firefox for years. – TheCarver Jun 26 '15 at 13:58
don't forget html next to body in the css declaration (that's what was missing for me) – Lego Feb 12 '16 at 19:47

score 30 · Answer 2 · edited Dec 14 '18 at 16:48

30

#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}

edited Dec 14 '18 at 16:48

Divyesh Kanzariya

3,629
3
43
44

answered Nov 16 '13 at 18:57

JumpLink

487
6
13

Stylebot.me is a dead link, the domain has been sold. – Quidam Nov 28 '18 at 08:38

score 11 · Answer 3 · answered Jun 27 '12 at 17:16

Notice how most of these can only be used WITHOUT a DOCTYPE. I'm looking for the same answer, but I have a DOCTYPE. There is one way to do it with a DOCTYPE however, although it doesn't apply to the style of my site, but it will work on the type of page you want to create:

div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;

Now, this was mentioned earlier but I just wanted to clarify that this is normally used with a DOCTYPE, height:100%; only works without a DOCTYPE

score 6 · Answer 4 · answered Jul 18 '10 at 16:18

6

<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>

answered Jul 18 '10 at 16:18

Bob

146
3

score 4 · Answer 5 · answered Dec 05 '18 at 18:07

I use this approach for drawing a modal overlay.

.fullDiv { width:100%; height:100%; position:fixed }

I believe the distinction here is the use of position:fixed which may or may not be applicable to your use case.

I also add z-index:1000; background:rgba(50,50,50,.7);

Then, the modal content can live inside that div, and any content that was already on the page remains visible in the background but covered by the overlay fully while scrolling.

mattbasta · Answer 6 · 2010-07-18T16:34:12.767

1

Use the HTML

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>

and use the CSS:

html, body {margin:0;padding:0;height:100%;}
#full-size {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#wrapper {
    /*You can add padding and margins here.*/
    padding:0;
    margin:0;
}

Make sure that the HTML is in the root element.

Hope this helps!

edited Jul 18 '10 at 16:34

answered Jul 18 '10 at 16:09

mattbasta

13,492
9
47
68

You will need some javascript to make maximize the browser window. – Byron Whitlock Jul 18 '10 at 16:10
thanks, this works ok, except one problem: - if an element is pushing wrapper (because it has 100% height), wrapper's height exceeds screen, results in overflow. if i remove 100% height from element, then it doesn't fill wrapper. – throwaway007 Jul 18 '10 at 16:21
@Byron: That's untrue. JS is entirely unnecessary for this. The only browser that might now work 100% is IE6, and that would be a case-by-case thing. – mattbasta Jul 18 '10 at 16:35

score 1 · Answer 7 · answered Jul 18 '10 at 16:29

1

#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}

answered Jul 18 '10 at 16:29

Robusto

31,447
8
56
77

The `right:0` and `bottom:0` descriptors are unnecessary; they will override the `top` and `left` descriptors. This used to get me all the time; CSS isn't like Windows Forms or XAML in this respect. – mattbasta Jul 18 '10 at 18:03
@mattbasta: Better check your work again then. I use this in FF 3.6, Safari and IE and it works great in all three. It's how I make a transparent "shield window" for modal popin dialogs. – Robusto Jul 18 '10 at 23:39
@mattbasta: Oh, and forgot to mention Chrome and Opera. – Robusto Jul 19 '10 at 00:25
It may work, but those descriptors are unnecessary if you set the width and height properly – mattbasta Jul 19 '10 at 02:26
@mattbasta: You stated that the right:0 and bottom:0 descriptors will override top and left. That is incorrect. What will not work is the 100% width and 100% height, esp. if you have borders and/or padding (and cross-browser implementations). What I have shown has been what I have been relying on for years without a problem, and the only way I have found to guarantee that the styling objective will be achieved in all cases. – Robusto Jul 19 '10 at 02:42

score 1 · Answer 8 · answered Sep 24 '20 at 00:08

Here is my Solution, I think will better to use vh (viewport height) and vw for (viewport width), units regarding to the height and width of the current viewport

function myFunction() {
  var element = document.getElementById("main");
  element.classList.add("container");
}

.container{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #333;
  margin: 0; 
  padding: 0; 
}

<div id="main"></div>
<button onclick="myFunction()">Try it</button>

how to make a full screen div, and prevent size to be changed by content?

8 Answers8

Linked