如何使一个盒子填充所有浏览器的整个网页？

我用以下代码创建了一个网页，并在谷歌浏览器中查看它。如何使一个盒子填充所有浏览器的整个网页？

<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行高度。

来源

2011-10-26 John

为此，我认为你必须求助于绝对或相对定位;否则，您的高度/边距组合会将屏幕底部的蓝线拉下。这个工程跨浏览器为这个简单的情况。希望它适用于更复杂的用例。

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

来源

2011-10-26 14:10:07 scottheckel

如果我理解正确的话，你的HTML &车身宽度设置为100％，高度100％

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

来源

2011-10-26 13:55:02

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

我不认为究竟是因为你没有看到底部的蓝色边框。 – scottheckel

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

来源

2011-10-26 13:56:46 NCode

如何使一个盒子填充所有浏览器的整个网页？

回答

相关问题