Question

我创建了一个包含以下代码的网页，并在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>

结果就是我所期望的，一个带有30像素蓝色边框的红色框填满了整个网络浏览器窗口。但是，当我在Firefox中查看它时，红色框只是一个行高的高度。在IE8中，没有蓝色边框。

如何让Firefox和IE8显示与我在Google Chrome中看到的相同？

附加说明我尝试在页面中添加不同的doctype标签，但这只会让它看起来像Firefox，即1行红色。

Answer 1

如果我理解正确，请设置你的html＆amp;体宽100％，身高100％

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

Answer 2

为此，我认为你必须求助于绝对或相对定位;否则，你的高度/边距组合将推动屏幕下方的蓝色底线。这适用于这种简单案例的跨浏览器。希望它适用于更复杂的用例。

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

Answer 3

您可以添加额外的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>

如何在所有浏览器中创建一个填充整个网页的框？

3 个答案: