CSS 多种方法实现100%高度的容器

1. 百分比高度

html,
body {
    height: 100%;
}
div {
    height: 100%;
    background-color: yellow;
}

相对于父元素100%高度，所以父元素高度也要调整。

2. 相对单位 vh

div {
    height: 100vh;
    background-color: yellow;
}

vh：相对视口高度的单位

vw：相对视口宽度的单位

100vh就代表高度占满整个窗口。

3. calc

html,
body {
    height: 100%;
}
div {
    height: calc(100%);
    background-color: yellow;
}

这里的百分号也是相对于父元素的。

了解一下 CSS3 中的 calc() 函数：

• calc() 函数用于动态计算长度值
• 运算符前后都需要保留一个空格
• 任何长度值都可以使用 calc() 函数进行计算
• 支持 +, -, *, / 运算

---

📘📘欢迎在我的博客上访问：
https://lzxjack.top/