Question

我正在写一个网页，但我无法使div元素充满整个屏幕。

我正在使用Mac OSX和Safari，Google Chrome和Firefox浏览器来查看页面。

这是我体内的代码：

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

body {
  background-color: grey;
  height: 100%;
  position: absolute;
  margin: 0px;
  padding: 0px;
}

.register {
  display: table;
  width: 100%;
  min-height: 25%;
}

.FAQ {
  display: table;
  width: 100%;
  height: 25%;
}

.sponsors {
  display: table;
  width: 100%;
  height: 25%;
}

.footer {
  display: table;
  width: 100%;
  height: 25%;
}

<div class="register"></div>
<div class="FAQ"></div>
<div class="sponsors"></div>
<div class="footer"></div>

Answer 1

将此行添加到每个div

table-layout:fixed;

例如

.register{
    display: table;
    width: 100%;
    min-height: 25%;
   table-layout:fixed; /* this line was added */
  }

Answer 2

您没有为body元素指定宽度，并且由于您已将其定位并且在其宽度内没有内容，因此默认情况下为0。

请注意，由于background propagation，而不是因为body已经是全角，您会看到灰色覆盖了整个屏幕，因此可能会造成混淆。

以下是初始代码，其背景颜色为html，因此您可以清楚地看到主体的宽度为0：

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
html {
 background:pink;
}
body {
  background-color: grey;
  height: 100%;
  position: absolute;
  margin: 0px;
  padding: 0px;
}

.register {
  display: table;
  width: 100%;
  min-height: 25%;
  background: red;
}

.FAQ {
  display: table;
  width: 100%;
  height: 25%;
  background: blue;
}

.sponsors {
  display: table;
  width: 100%;
  height: 25%;
  background: green;
}

.footer {
  display: table;
  width: 100%;
  height: 25%;
  background:yellow;
}

<div class="register"></div>
<div class="FAQ"></div>
<div class="sponsors"></div>
<div class="footer"></div>

如果将width:100%添加到正文中，它将得到修复：

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

body {
  background-color: grey;
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0px;
  padding: 0px;
}

.register {
  display: table;
  width: 100%;
  min-height: 25%;
  background: red;
}

.FAQ {
  display: table;
  width: 100%;
  height: 25%;
  background: blue;
}

.sponsors {
  display: table;
  width: 100%;
  height: 25%;
  background: green;
}

.footer {
  display: table;
  width: 100%;
  height: 25%;
  background:yellow;
}

<div class="register"></div>
<div class="FAQ"></div>
<div class="sponsors"></div>
<div class="footer"></div>

宽度网页未填满屏幕

2 个答案: