Question

我想要做的是我的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%;，正如其名称所示，将作为参考父级的高度的默认高度，但它似乎不起作用。 Here它是作为错误发布的，但不会在html或body标记上使用它。

浏览Stackoverflow我可以看到，在某些情况下，当父元素使用display:table时，人们使用display: table-row;作为父元素，使用min-height作为子元素，但是在这种情况下，我使用的是html和body代码，我不知道将两个代码设置为table是否合适。

我想要的表现是我的网页看起来像我的第二个证明，但body标签也包裹了所有屏幕。

我怎样才能实现它？

Answer 1

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

＆＃13;

html,
body {
  height: 100%;
}
body {
  background-color: green;
  margin: 0
}
#centerDiv {
  height: 100px;
  width: 100px;
  background-color: red;
  margin: auto;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

*, :before, :after {
 margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  background: green;
}

＆＃13;

如何设置html和body标签来包装全屏？

2 个答案: