如何让一个框在所有浏览器中填满整个网页？

发布于 2024-12-12 04:33:14 字数 583 浏览 0 评论 0原文

我使用以下代码制作了一个网页，并在 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 像素蓝色边框的红色框，填充了整个 Web 浏览器窗口。然而，当我在Firefox中查看时，红色框只有一行高的高度。在IE8中，没有蓝色边框。

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

附加说明 我尝试向页面添加不同的 doctype 标签，但这只会使其看起来像 Firefox，即红色的 1 行高度。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可可 2024-12-19 04:33:14

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

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

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>

回复收藏 0 原文

惯饮孤独 2024-12-19 04:33:14

如果我理解正确的话，请设置你的 html &主体宽度为 100%，高度为 100%

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

回复收藏 0 原文

眼眸印温柔 2024-12-19 04:33:14

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

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>

回复收藏 0 原文

~没有更多了~