极客教程CSS 高度100%
在网页设计中，经常会遇到需要设置元素高度为100%的情况，这样可以让元素充满整个父元素的高度。本文将详细介绍如何使用CSS来实现高度100%的效果。
1. 设置body和html的高度为100%
首先，我们需要确保html和body元素的高度都设置为100%，这样才能确保子元素的高度可以继承父元素的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Height 100%</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="height: 100%; background-color: lightblue;">
This div has a height of 100% of the viewport height.
</div>
</body>
</html>
Output:
在上面的示例中，我们设置了html和body元素的高度为100%，然后在body中添加了一个div元素，设置其高度为100%。这样这个div元素的高度就会充满整个视口高度。
2. 使用flex布局实现高度100%
另一种常见的方法是使用flex布局来实现高度100%的效果。通过设置父元素为flex容器，子元素为flex项，并设置flex属性为1，可以让子元素的高度自动填充父元素的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Height 100% with Flexbox</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100%;
}
.item {
flex: 1;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
This div has a height of 100% of the container height using flexbox.
</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个flex容器，并设置其高度为100%，然后在容器中添加了一个flex项，设置其flex属性为1。这样这个flex项的高度就会充满整个容器的高度。
3. 使用grid布局实现高度100%
除了flex布局，我们还可以使用grid布局来实现高度100%的效果。通过设置父元素为grid容器，子元素为grid项，并设置grid-template-rows属性为1fr，可以让子元素的高度自动填充父元素的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Height 100% with Grid</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: grid;
height: 100%;
grid-template-rows: 1fr;
}
.item {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
This div has a height of 100% of the container height using grid.
</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个grid容器，并设置其高度为100%，然后在容器中添加了一个grid项。通过设置grid-template-rows属性为1fr，这个grid项的高度就会充满整个容器的高度。
4. 使用绝对定位实现高度100%
另一种常见的方法是使用绝对定位来实现高度100%的效果。通过设置父元素为相对定位，子元素为绝对定位，并设置top、bottom属性为0，可以让子元素的高度自动填充父元素的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Height 100% with Absolute Positioning</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 100%;
}
.item {
position: absolute;
top: 0;
bottom: 0;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
This div has a height of 100% of the container height using absolute positioning.
</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个相对定位的父元素，并设置其高度为100%，然后在父元素中添加了一个绝对定位的子元素。通过设置top和bottom属性为0，这个子元素的高度就会充满整个父元素的高度。
5. 使用calc()函数实现高度100%
除了以上方法，我们还可以使用calc()函数来实现高度100%的效果。通过设置元素的高度为calc(100% – 50px)，可以让元素的高度减去指定的像素值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Height 100% with calc()</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: calc(100% - 50px);
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
This div has a height of 100% of the viewport height minus 50px using calc().
</div>
</body>
</html>
Output:
在上面的示例中，我们设置了一个元素的高度为calc(100% – 50px)，这样这个元素的高度就会充满整个视口高度减去50像素。
6. 使用vh单位实现高度100%
另一种常见的方法是使用vh单位来实现高度100%的效果。通过设置元素的高度为100vh，可以让元素的高度等于视口的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Height 100% with vh unit</title>
<style>
.container {
height: 100vh;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
This div has a height of 100% of the viewport height using vh unit.
</div>
</body>
</html>
Output:
在上面的示例中，我们设置了一个元素的高度为100vh，这样这个元素的高度就会充满整个视口的高度。
7. 使用表格布局实现高度100%
表格布局也是一种实现高度100%的方法。通过将父元素设置为display: table，子元素设置为display: table-row，可以让子元素的高度自动填充父元素的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Height 100% with Table Layout</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: table;
height: 100%;
}
.row {
display: table-row;
}
.cell {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="cell">
This div has a height of 100% of the container height using table layout.
</div>
</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们创建了一个表格布局，将父元素设置为display: table，子元素设置为display: table-row。这样子元素的高度就会自动填充父元素的高度。
8. 使用min-height实现最小高度100%
有时候我们需要元素的高度至少为100%，但可以根据内容的多少自动增加高度。这时可以使用min-height属性来实现最小高度为100%的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Min Height 100%</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
min-height: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
This div has a minimum height of 100% of the viewport height.
</div>
</body>
</html>
Output:
在上面的示例中，我们设置了一个元素的min-height为100%，这样这个元素的高度至少为整个视口的高度，但可以根据内容的多少自动增加高度。
9. 使用JavaScript动态设置高度为100%
有时候我们需要根据页面内容的变化动态设置元素的高度为100%，这时可以使用JavaScript来实现。下面是一个示例代码，通过JavaScript动态设置元素的高度为100%。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Height 100% with JavaScript</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container" id="container">
This div has a height of 100% of the viewport height.
</div>
<script>
window.addEventListener('resize', function() {
document.getElementById('container').style.height = window.innerHeight + 'px';
});
</script>
</body>
</html>
Output:
在上面的示例中，我们通过JavaScript监听窗口大小变化事件，然后动态设置元素的高度为窗口的高度，这样可以实现元素的高度始终为100%。
10. 使用CSS Grid实现多列布局高度100%
在实现多列布局时，有时候我们需要让每一列的高度都为100%，这时可以使用CSS Grid来实现。下面是一个示例代码，通过CSS Grid实现多列布局，每一列的高度都为100%。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Height 100% for Multi-column Layout</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
}
.column {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="column">
This is column 1 with a height of 100%.
</div>
<div class="column">
This is column 2 with a height of 100%.
</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们使用CSS Grid实现了一个两列布局，每一列的高度都为100%。这样可以实现多列布局中每一列的高度都充满整个父元素的高度。