Question

很长一段时间我遇到了一个问题，而当我这么做的时候，当我无法自己解决问题时，我会寻找解决方案。

所以我正在构建一个网页设计应用程序，虽然今天我一直在重建它，所以没有添加垃圾css。

今天我为一个元素添加了一些简单的样式，我注意到如果我在一个独立的div上没有position: absolute;或fixed，那么当使用百分比编码时它的高度不会改变。

.box1 {
  width: 100%;
  height: 50%;
  background-color: rgb(0, 244, 85);
}

我注意到了这一年，直到今天我还不知道为什么会那样做。我总是通过在身体上涂抹以下物质来避免它。

body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

有人可以解释为什么会这样吗？

Answer 1

将此添加到您的CSS，它应该工作

<强> CSS

html, body {
    height: 100%;
}

问题是，您的body和html容器默认情况下没有完整的高度，因此默认情况下您的div不会有完整的高度。为了避免将来这种情况，请使用reset.css让您的生活更轻松：）