解决 html、body 元素的高度问题
在 web 开发中，我们经常会碰到 html、body 元素高度不自动铺满浏览器窗口的问题。造成这种现象的原因有很多，比如设置了固定高度、浮动、绝对定位等属性，这些属性都可能会影响到元素的高度。
那么我们该如何解决这个问题呢？本文将提供一些方法供大家参考。
1. 简单粗暴：设置高度为 100%
要让 html、body 元素铺满整个浏览器窗口，最简单的方法就是为它们设置高度为 100%。
代码如下：
html, body {
height: 100%;
}
这种方法非常直接，几乎在所有浏览器中都能正常工作。但是，它有一个缺点，就是当页面内容超出屏幕高度时，html、body 元素的高度就不再能完全覆盖整个页面，这样就会出现滚动条。
2. 使用绝对定位
使用绝对定位也可以让 html、body 元素铺满整个浏览器窗口。
代码如下：
html, body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
这种方法的好处是可以让页面内容超出屏幕高度时，html、body 元素的高度仍然能完全覆盖整个页面，不会出现滚动条。但是，它有一个缺点，就是当父级元素的高度不确定时，此方法就不能正常工作了。
3. 使用 flexbox 布局
利用 flexbox 布局也可以让 html、body 元素铺满整个浏览器窗口。
代码如下：
html, body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
body {
flex: 1;
}
这种方法的好处是既能完全铺满整个页面，也不会出现滚动条。但是，它有一个缺点，就是它只适用于现代浏览器。
4. 使用 calc() 函数
使用 calc() 函数也可以让 html、body 元素铺满整个浏览器窗口。
代码如下：
html, body {
height: calc(100% - 0);
}
使用 calc() 函数的好处是可以让页面内容超出屏幕高度时，html、body 元素的高度仍然能完全覆盖整个页面，不会出现滚动条。但是，它有一个缺点，就是它只适用于现代浏览器。
以上四种方法就是解决 html、body 元素高度问题的常用方法。另外，还有一些其他方法，比如使用 JavaScript 来动态设置高度等。
总结
解决 html、body 元素高度问题的方法有很多，可以根据具体的情况来选用。如果只是简单地让元素铺满整个浏览器窗口，可以使用第一种方法；如果要让元素的高度始终完全覆盖整个页面，可以使用第二种、第三种或第四种方法。