【CSS】设置元素高度为100%｜使用h-100和h-50
本指南解释了如何使用CSS类h-100和h-50将元素的高度设置为100%。通过这样做，元素的高度将调整为与父容器的高度一致。
🔹 代码示例
<div class="container">
<div class="h-100">该元素的高度为100%。</div>
<div class="h-50">该元素的高度为50%。</div>
</div>
<style>
.container {
height: 300px;
}
.h-100 {
height: 100%;
}
.h-50 {
height: 50%;
}
</style>
💻 完整可用代码（复制粘贴即可使用）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>100%和50%高度的元素</title>
<style>
.container {
height: 300px;
border: 2px dashed #000;
}
.h-100 {
height: 100%;
background-color: #90EE90;
padding: 1rem;
}
.h-50 {
height: 50%;
background-color: #ADD8E6;
padding: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="h-100">该元素的高度为100%。</div>
<div class="h-50">该元素的高度为50%。</div>
</div>
</body>
</html>
🧩 应用与使用
height: 100%;是最基本的调整元素高度的方法之一，可以使元素的高度与父容器的高度一致。这在需要让元素占据父容器的整个高度时特别有用。
📱 响应式设计
h-100在响应式设计中非常有效。通过使用h-100，你可以根据不同屏幕尺寸（如移动设备）调整元素的高度。
通过使用此类，你可以确保元素的高度会根据父容器调整，从而使垂直布局更加一致。
已复制！