css 高度100%

作者：—上花′Ing 发布日期:2025-11-02 浏览:43

html, body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  background-color: lightblue;
}

html, body { height: 100%; }:
- 这行代码确保了 html 和 body 元素的高度为浏览器窗口的100%。默认情况下，html 和 body 的高度是根据内容来决定的，设置为 100% 可以让它们占据整个视口的高度。
margin: 0;:
- 这是为了去除浏览器默认给 body 添加的外边距（margin），避免页面出现不必要的空白边框。
.container { height: 100%; }:
- 这里定义了一个类 .container，它的高度也是100%，意味着它将继承父元素（即 body）的高度。因此，.container 也会占据整个视口的高度。
background-color: lightblue;:
- 这只是为了让容器有一个明显的背景颜色，方便观察效果。

通过这种方式，你可以确保一个元素（如 .container）的高度始终与浏览器窗口的高度保持一致。