HTML&CSS背景异常：全屏显示绿色，红绿色块未按预期展示

背景色铺满整个屏幕，本该看到红色和绿色区块，实际却只有全屏绿色。原本想让顶部显示绿色区块、底部显示红色区块，但注释掉div的样式规则后，红色区块才会出现。

代码示例 #

CSS #

div {
  width: 300px;
  height: 200px;
  background-color: green;
}

section {
  width: 300px;
  height: 200px;
  background-color: red;
}

HTML #

<div></div>
<div></div>
<section></section>

原因分析 #

按你给出的代码，正常应该是三个垂直排列的区块：两个200px高、300px宽的绿色div，下面跟着同尺寸的红色section。你看到全屏绿色，大概率是这两种情况：

• 区块超出视口：如果你的屏幕高度小于600px（200×3），红色section会被挤到屏幕下方，得滚动页面才能看到，你可能没注意到这点，误以为全屏都是绿色。
• 样式写错：你实际运行的代码里，可能把div的height设成了100vh（占满整个屏幕高度），这样两个div各自占满屏幕，第二个div直接盖住了下面的section，自然看不到红色。

解决方法 #

方案1：只保留一个绿色区块 #

删掉一个<div>标签，或者调整div的高度，给红色区块留出位置：

div {
  width: 300px;
  height: calc(100vh - 220px); /* 减去红色区块高度和间距 */
  background-color: green;
  margin-bottom: 20px;
}

section {
  width: 300px;
  height: 200px;
  background-color: red;
}

方案2：保留两个绿色div，确保内容可滚动 #

给body添加滚动条，避免section被挤出视口：

body {
  margin: 0;
  padding: 20px;
  overflow-y: auto; /* 内容超出时显示滚动条 */
}

div {
  width: 300px;
  height: 200px;
  background-color: green;
  margin-bottom: 20px;
}

section {
  width: 300px;
  height: 200px;
  background-color: red;
}

内容的提问来源于stack exchange，提问作者Andrew Wightman