无法将div调整为100%高度，红色div视口高度设置失效如何修复？

嘿，这个问题我碰到好多次了！其实核心原因很简单，咱们一步步来拆解修复：

为什么你的红色div没法占满视口高度？ #

默认情况下，块级元素的高度是由内部内容撑开的。如果你只给红色div设置height: 100%，它的父元素（比如<body>和<html>）没有明确设置高度的话，这个100%是没有参照对象的，自然不会生效。另外，浏览器默认给<body>加了margin，这也会导致div超出视口，出现滚动条。

两种靠谱的修复方法 #

方法1：基于百分比的传统方案 #

这种方案需要确保所有祖先元素都占满视口高度，同时清除默认边距：

/* 先让html和body占满整个视口，清除默认边距 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 再给红色div设置100%高度 */
.red-div {
  height: 100%;
  background-color: red;
  /* 如果需要加内边距，用box-sizing避免超出视口 */
  box-sizing: border-box;
}

方法2：用视口单位vh（更简洁） #

vh是视口高度单位，100vh直接等于视口高度的100%，不需要依赖父元素的高度设置，兼容性也很好：

/* 清除body默认边距，避免滚动条 */
body {
  margin: 0;
  padding: 0;
}

.red-div {
  height: 100vh;
  background-color: red;
  box-sizing: border-box;
}

额外注意点 #

如果设置后还是有滚动条，检查一下：

• 红色div有没有默认的margin或padding，记得清零
• 有没有其他兄弟元素或者父元素的外边距塌陷问题，必要时可以给父元素加overflow: hidden或者用padding-top替代margin-top

下面是一个完整的可运行示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .red-div {
      height: 100vh;
      background-color: crimson;
    }
  </style>
</head>
<body>
  <div class="red-div"></div>
</body>
</html>

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