45

I want to make a div fit the initial height and width of a users screen.

I think the following crudely drawn diagram explain this better:

enter image description here

#div
{
 width: 100%;
 height: 100%;
}

does not seem to work

jonnnnnnnnnie
  • 1,219
  • 3
  • 15
  • 24

11 Answers11

48

If I understand correctly (there's some room for confusion here):

http://jsfiddle.net/zRpNp/

#screenFiller {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 15px solid orange
}

You might be after the position: fixed version: http://jsfiddle.net/zRpNp/1/

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Yes, It works! However do you think it would work on all browsers from IE8+ – jonnnnnnnnnie Jun 08 '11 at 22:48
  • If it's just IE8 you want to check, use IE9's "IE8 Mode" (press F12), or use http://ipinfo.info/netrenderer/ + http://fiddle.jshell.net/zRpNp/show/light/ – thirtydot Jun 08 '11 at 22:54
45

Personally I like the pure CSS solution. Just use the vh unit.

#filldiv
{
    height: 100vh;
}

That will make the div fill the height of the browser window.

In addition, you can also make it fill the width of the browser window, this only uses the vw unit.

#filldiv
{
    width: 100vw;
}

Both are shown in this fiddle

I personally really like both of these units because they can be used for dynamic resizing of things such as font sizes.

tinfoilboy
  • 926
  • 10
  • 17
  • how would you do width instead of hight? – Gradyn Wursten Oct 11 '15 at 18:25
  • @Tinfoilboy This is really elegant! Do you know how it breaks in unsupported browsers? – Dionysis Feb 23 '16 at 22:32
  • @Dionysis, I don't exactly know how it breaks, but I assume it just uses the default width/height. Most modern browsers support this now, so I assume your safe if you use it, do be aware of Opera Mini though. http://caniuse.com/#feat=viewport-units – tinfoilboy Feb 24 '16 at 18:36
6

For clarification...

I'd use vh and vw(viewport height & viewport width)

<html>
 <body>
  <div style="height:100vh;width:100vw">First screen section, fills a whole screen</div>
  <div style="height:100vh;width:100vw;">Hmm... this too</div>
 </body>
</html>

100% Doesn't work because it fills 100% of a container(body) only, not a screen.

Edit: A few browsers don't support it, but I find that most modern browsers do

jamesrchen
  • 86
  • 1
  • 6
1

i think this is the easiest way... by letting the browser tell he height... using java script

` 

<html>
<head>
<title>viewport</title>
<style type="text/css">
  * { padding:0; margin:0; }
  #test { background:#aaa; height:100%; width:100%; }
</style>
<script type="text/javascript">
  window.onload = function() {
    var height = getViewportHeight();
    alert("This is what it looks like before the Javascript. Click OK to set the          height.");
    if(height > 0)
      document.getElementById("test").style.height = height + "px";
  }
  function getViewportHeight() {
    var h = 0;
    if(self.innerHeight)
      h = window.innerHeight;
    else if(document.documentElement && document.documentElement.clientHeight)
      h = document.documentElement.clientHeight;
    else if(document.body) 
      h = document.body.clientHeight;
  return h;
  }
</script>
 </head>
 <body>
  <div id="test">
  <h1>Test</h1>
  </div>
  </body>
 </html>`
Telwa Gangnam
  • 31
  • 7
1

Setting your height to 100% in a div only means that your div will fill 100% of its container; not 100% of the page.

I would suggest that you would either want to use a min-height declaration on your div or its container or use JavaScript to find the initial height of the user's screen (because everybody will have something slightly different) and set that as an inline style on your div.

Code something along the lines of the following will return the screen dimensions:

var x,y;
if (self.innerHeight) // all except Explorer
{
  x = self.innerWidth;
  y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
  x = document.documentElement.clientWidth;
  y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
  x = document.body.clientWidth;
  y = document.body.clientHeight;
}
Phil.Wheeler
  • 16,748
  • 10
  • 99
  • 155
  • +1 for recognizing that height=100% is relative to the parent container that must be set explicitly. -1 for not using a pure CSS solution using the position properties to set all 4 sides as proposed by thirtydot. – Brent Friar Jun 08 '11 at 23:14
1

You can do this completely with CSS too:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

div {
    height: 100%;
    width: 100%;
}
Jordan
  • 31,971
  • 6
  • 56
  • 67
1

another way to do this with CSS only...

http://jsfiddle.net/pxfunc/qQ45K/

html, body {height:100%;} /* explicitly set html & body height */

#fillScreen {
    position:relative;
    top:0;
    left:0;
    height:100%;
    width:100%;
}
MikeM
  • 27,227
  • 4
  • 64
  • 80
0
<html><body style="margin: 0;">
<div style="height: 100%; width: 100%; background: #ccc;">a</div>
<div style="background: #777;height: 100%; width: 100%">b</div>
</body>
</html>

works for me

Ascherer
  • 8,223
  • 3
  • 42
  • 60
0

Your css style is looking for an id="div" not a div tag. This should work assuming your div in parented by the <body> or another 100%, 100% html element:

<div id="fullViewPort">
    My Content
</div>

#fullViewPort {
    width: 100%;
    height: 100%;
}
Ben Roux
  • 7,308
  • 1
  • 18
  • 21
0
 <style>
    body    {
        margin:0;
        padding:0;
    }
    #try    {       
        height:100%;
        width:100%;
        margin:0;
        padding:0;
        clear:both;
    }
    #next   {
        height:10%;
    }
    </style>

    <body>
    <div id="try">hello1</div>
    <div id="next">hello2</div>
</body>

works for me.

Phphelp
  • 1,290
  • 2
  • 14
  • 25
0

Why you don't try :

<html><body style="margin: 0;">
<div style="height: 100%; width: 100%">stuff that user see</div>
<div style="height: 100%; width: 100%">Other stuff</div></body>
</html>

that should work

logos
  • 1