logo标签列表

如何设置html和body标签以覆盖整个屏幕？

htmlcss
3
我想要的是我的html和body标签占据任何电脑屏幕的全部空间。屏幕的限制取决于每台计算机的屏幕，没有滚动条或overflow:hidden属性。

这是我简单的HTML代码：

<body>
  <div id="centerDiv"></div>
</body>

证明1

首先，我尝试将 html 和 body 标签设置为 height: 100%;，但是屏幕上出现了滚动条。这是我的 CSS：

html{
  height: 100%;
  background-color: blue;
}

body{
  height: 100%;
  background-color: green;
}

#centerDiv{
  height: 100px;
  width: 100px;
  background-color: red;
  margin: auto;
}

并且你可以查看 jsfiddle，在那里你可以看到滚动条。

证明2

然后，在看到滚动条出现后，我尝试将 html 标签更改为 min-height: 100%;，使得 html 标签变成以下形式：

html{
  min-height: 100%;
  background-color: blue;
}

您可以查看jsfiddle，在其中可以看到滚动条消失了，但是body标签没有占据整个屏幕。

证明3

我也尝试将html和body标签都设置为min-height: 100%;，但结果与第2种情况相同。

我本以为min-height: 100%;会根据父元素的高度作为默认高度，但它似乎不起作用。在这里，有人报告了这个问题，但没有涉及使用html或body标签时的情况。

在Stackoverflow上搜寻时，我发现在某些情况下，当父元素使用min-height时，人们会为父元素设置display:table，为子元素设置display: table-row;，但由于我在这种情况下使用的是html和body标签，我不知道同时将两个标签设置为table是否太恰当了。

我想要的效果是，我的网页看起来像第二种情况，但同时body标签也要占据整个屏幕。

如何做到？

不要忘记做 padding: 0; margin: 0。 - Marc B
我会考虑添加 overflow:hidden，以便隐藏所有滚动条，以防用户触发浏览器操作时不希望它们出现（例如：Chrome打开下载工具栏）。 - David Ortega
2个回答
2

<body> 具有默认的 margin，因此您需要在 <body> 上重置 margin

html,
body {
  height: 100%;
}
body {
  background-color: green;
  margin: 0
}
#centerDiv {
  height: 100px;
  width: 100px;
  background-color: red;
  margin: auto;
}
<body>
  <div id="centerDiv"></div>
</body>

1

使用视口单位的@dippas解决方案的替代方案：

*, :before, :after {
 margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  background: green;
}

1
考虑到 Edge 和 IE 的支持还不完整，您可以在此处检查 http://caniuse.com/#feat=viewport-units - David Ortega
部分支持是指不支持“vmax”单位。-- 这里没有使用“vmax”，但还是值得指出。 - timolawl
以防万一 :) 而且当你想要支持旧版IE版本时（我是说几乎所有前端开发人员都倾向于假装它们不存在，这样我会更加快乐），这可能会导致问题。 - David Ortega
我必须说，在试图支持仍在使用旧版IE的1.5％用户时，很难提出一个好的案例，特别是当微软已经完全停止对自己的IE系列提供支持时。有些情况下这样做是有意义的，但这更多是例外而不是规则。 - timolawl
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接