极客教程CSS 高度撑开
在网页设计中，经常会遇到需要撑开高度的情况，比如要求两栏布局中，左侧栏高度自适应右侧栏的高度。本文将介绍几种常见的CSS方法来实现高度撑开的效果。
1. 使用float属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float属性实现高度撑开</title>
<style>
.container {
border: 1px solid #ccc;
}
.left {
float: left;
width: 200px;
background-color: #f0f0f0;
}
.right {
overflow: hidden;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Left Column
</div>
<div class="right">
Right Column
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，左侧栏使用float: left;属性，右侧栏使用overflow: hidden;属性来清除浮动，从而实现高度撑开的效果。
2. 使用display: table属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display: table属性实现高度撑开</title>
<style>
.container {
display: table;
width: 100%;
border-collapse: collapse;
}
.left, .right {
display: table-cell;
border: 1px solid #ccc;
}
.left {
width: 200px;
background-color: #f0f0f0;
}
.right {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Left Column
</div>
<div class="right">
Right Column
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，父元素设置display: table;，子元素设置display: table-cell;，从而实现高度撑开的效果。
3. 使用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局实现高度撑开</title>
<style>
.container {
display: flex;
border: 1px solid #ccc;
}
.left {
width: 200px;
background-color: #f0f0f0;
}
.right {
flex: 1;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Left Column
</div>
<div class="right">
Right Column
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，父元素设置display: flex;，右侧栏设置flex: 1;，从而实现高度撑开的效果。
4. 使用伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素清除浮动实现高度撑开</title>
<style>
.container {
border: 1px solid #ccc;
overflow: hidden;
}
.left {
float: left;
width: 200px;
background-color: #f0f0f0;
}
.right {
background-color: #e0e0e0;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Left Column
</div>
<div class="right clearfix">
Right Column
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，使用伪元素clearfix::after来清除浮动，从而实现高度撑开的效果。
5. 使用绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位实现高度撑开</title>
<style>
.container {
position: relative;
border: 1px solid #ccc;
}
.left {
position: absolute;
width: 200px;
background-color: #f0f0f0;
}
.right {
margin-left: 200px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Left Column
</div>
<div class="right">
Right Column
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，左侧栏使用position: absolute;进行绝对定位，右侧栏使用margin-left来撑开高度。
6. 使用grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid布局实现高度撑开</title>
<style>
.container {
display: grid;
grid-template-columns: 200px 1fr;
border: 1px solid #ccc;
}
.left {
background-color: #f0f0f0;
}
.right {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Left Column
</div>
<div class="right">
Right Column
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，使用display: grid;和grid-template-columns属性来实现高度撑开的效果。
7. 使用padding-bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padding-bottom实现高度撑开</title>
<style>
.container {
border: 1px solid #ccc;
}
.left {
float: left;
width: 200px;
background-color: #f0f0f0;
}
.right {
overflow: hidden;
background-color: #e0e0e0;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Left Column
</div>
<div class="right">
Right Column
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，右侧栏使用padding-bottom和margin-bottom来实现高度撑开的效果。