Geek Answers Handbook

How to make a field fill the entire web page in all browsers?

I made a webpage 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 square with a 30x 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. IE8 lacks a blue frame.

How to make Firefox and IE8 display the same as in Google Chrome?

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

+5
source share
3 answers

, ; / . - . , .

<!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>
+2

, html body 100%, 100%

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

+2

You can 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>
0
source

More articles:


All Articles