当我们想要一个div容器的高度始终保持100%时，我们需要在CSS中使用以下两种方法来实现。
方法一：使用vh单位
一种简单的方法是使用CSS的vh单位来将容器的高度设置为屏幕的高度。
div {
height: 100vh;
}
这将把容器的高度设置为视口高度的100％，给用户提供了更清晰的用户体验。在这种情况下，应该将HTML和body元素的高度设置为100％，以确保真正充满整个屏幕。
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
height: 100vh;
}
方法二：使用绝对定位
另一种方法是使用绝对定位来使容器覆盖整个父容器，同时设置父容器的高度。
.container {
position: relative;
height: 100%;
}
div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
这将使容器具有完全填充父容器的高度和宽度的作用，并且在父容器的高度发生变化时，也会自动调整。
以上两种方法都可以使一个div容器始终保持100%的高度。下面是这两种方法的示例演示：
示例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例一</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
}
div {
height: 100vh;
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<div>通过vh单位设置容器高度为100vh</div>
</div>
</body>
</html>
示例二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例二</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 100%;
}
div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<div>通过绝对定位设置容器高度为100%</div>
</div>
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS设置盒子容器(div)高度(height)始终为100% - Python技术站
微信扫一扫 
支付宝扫一扫 