CODEWITHSUNDEEP
htmlcsscross-browser
learningtech
learningtech

Reputation: 33695

How to make a box fill an entire web page in all browsers?

I made a web page with the following code and viewed it in Google Chrome.

<html>
<head>
        <style type="text/css">
                html {padding:30px; background-color:blue;}
                body {margin:0px; background-color:red;}
        </style>
</head>
<body>
hello world
</body>
</html>

The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.

How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?

Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.

Upvotes: 5

Views: 4618

Answers (3)

scottheckel
scottheckel

Reputation: 9244

For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body { background:blue; }
      .first{
        position:absolute; /* fixed also works */
        background:red;
        top:30px;
        left:30px;
        right:30px;
        bottom:30px;
      }
    </style>  
  </head>
  <body>
    <div class="first">hello world</div>
  </body> 
</html>

Upvotes: 2

Gavin Wood
Gavin Wood

Reputation: 1004

if i understand you correctly, set your html & body width to 100% , height 100%

http://jsfiddle.net/Diezel23/Lv6Vw/#base

Upvotes: 2

NCode
NCode

Reputation: 2808

You could add an additional div:

<html>
    <head>
        <style>
            body {
                padding: 30px;
                margin: 0px;
            }
            div {
                width: 100%;
                height: 100%;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            ABC
        </div>
    </body>
</html>

Upvotes: 0

Related Questions