css设置高度占满

想让下面的header元素高度为100%，奈何设置了height： 100%；之后没作用,高度自适应问题

1
2
3

<body>
  <div class="wrap"></div>
</body>

我想让这个div铺满整个页面

方法一：
先让根元素和body铺满，再然div铺满，这样div就会继承body的高度了

:root,
body {
  height: 100%;
}
.wrap {
  width: 100%;
  height: 100%;
  background-color: skyblue;
}

方法二：
让div脱离文档流，再铺满

.wrap {
  width: 100%;
  height: 100%;
  background-color: skyblue;
  position: fixed;
}

方法三：
让div脱离文档流，再吸收剩余空间

.wrap {
  background-color: skyblue;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}