ansaurus

Question

Answer 1

+3 A:

This always works for me:

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
     html, body {
      height: 100%;
      margin: 0;
     }

     #wrapper {
      min-height: 100%; 
     }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
     #container {
      height: 100%;
     }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

This is probably the simplest solution to this problem. Only need to set four CSS attributes (although one of them is only to make stupid IE happy).

TandemAdam 2009-11-12 02:31:17

-1 Does not work in IE

Josh Stodola 2009-11-12 02:36:30

+1 works in Safari, which Josh's answer does not.

Jed Smith 2009-11-12 02:45:32

And IE solution is better than a Mac-Safari solution. A hell of a lot more people are using IE on Windows than Safari on Mac (for a reason).

Josh Stodola 2009-11-12 02:56:48

pretty sure it works in IE 7! Not quite sure what you are talking about Josh.

TandemAdam 2009-11-12 03:53:59

This works in IE7, Chrome3 and Safari4. Does not work in Opera10. All tested on Windows.

awe 2009-11-12 08:48:45

I am sorry you guys, you are absolutely correct. I forgot to add a DOCTYPE when testing this!!! This in fact, does work fine. It works in IE8, as well. SO is really being stupid right now, because it will not let me change my vote.

Josh Stodola 2009-11-12 14:08:26

No problem. I probably should have put the DOCTYPE in my HTML looking back.

TandemAdam 2009-11-12 20:50:37

Answer 2

+1 A:

Unfortunately, the height property in CSS is not as reliable as it should be. Therefore, Javascript will have to be used to set the height style of the element in question to the height of the users viewport. And yes, this can be done without absolute positioning...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</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>

Josh Stodola 2009-11-12 02:34:23

If you are using a library like jQuery (recommended), getting the height via `$(window).height();` would be the best idea.

Josh Stodola 2009-11-12 02:47:21

Is there a pure css solution?

Mask 2009-11-12 02:53:44

@Mask No, there is not. Not yet anyways.

Josh Stodola 2009-11-12 02:55:04

@Jed How about you try to apply a min-height:100% and try it in Mac-Safari and maybe we can reach a solution here. I think that would be better than arguing about platforms.

Josh Stodola 2009-11-12 02:58:42

Good luck to you.

Jed Smith 2009-11-12 03:33:40

This works in IE7, Chrome3 and Safari4 and Opera10. All tested on Windows. Drawback is it uses javascript, which was something **Mask** wanted to avoid (see his comment on this answer). **TandemAdam**s answer is pure CSS, and works on all the browsers I tested except Opera.

awe 2009-11-12 08:54:47

Answer 3

+2 A:

I don't have IE Josh, could you please test this for me. Thanks.

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
     .hellomoto
     {
      background-color:#ccc;
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      overflow:auto;
     }
     body
     {
      background-color:#ff00ff;
      padding:0px;
      margin:0px;
      width:100%;
      height:100%;
      overflow:hidden;
     }
     .text
     {
      background-color:#cc00cc;
      height:800px;
      width:500px;
     }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

Tubbe 2009-11-12 08:48:01

you don't need to set the widths to 100%

TandemAdam 2009-11-12 09:01:22

This works in IE7, Chrome3, Safari4 and Opera10. All tested on Windows. - And it is pure css! Good work Tubbe!

awe 2009-11-12 09:05:39

@TandemAdam: Actually, you must set `width:100%` when using `position:absolute;`.

awe 2009-11-12 09:08:05

I don't get it; you are hard-coding a height of 800px on the DIV. The OP wants this to be dynamic.

Josh Stodola 2009-11-12 14:12:17

Yes, the hard-coded 800px is an example of dynamic content.

Tubbe 2009-11-12 15:14:54

Oh sorry, didn't see that sneaking absolute in there (or top/left). Well it's fine then :)

TandemAdam 2009-11-12 20:53:52

ansaurus

tags:

views:

answers:

How to make a <div> always full screen?

related questions