CSS等高布局原理:通过padding补白(即:隐藏容器溢出,正内补丁,负外补丁)实现。
事实上这种方式实现的等高布局只是个障眼法,即通过背景颜色的填充,产生视觉上等高的假象而已。
实现原理解析:
HTML代码:
<header>头部</header>
<div class="content">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<footer>脚部</footer>
1. 为原始界面设置样式:
CSS代码示例:
header{
height: 80px;
background: #00A3E8;
}
footer{
height: 80px;
background: #C3C3C3;
}
.left{
float:left;
width: 30%;
background: #23B14D;
}
.right{
float: right;
width: 70%;
height: 500px;
background: #FFC90D;
}
原始界面如下:
2. 使用padding对content中左侧的内间距进行补白(padding为正值):
CSS代码示例:
.left{
float:left;
width: 30%;
background: #23B14D;
padding-bottom: 2000px;//设置一个较大的值
}
左侧正内补丁后的界面如下:
3. 使用margin对content中左侧的外间距进行调整(margin为负值):
CSS代码示例:
.left{
float:left;
width: 30%;
background: #23B14D;
/*正内负外*/
padding-bottom: 2000px;//设置一个较大的值
margin-bottom: -2000px;//与padding数值相同,但为负值
}
左侧负外补丁后的界面如下:
4. 对right部分进行步骤2、3中相同的设置:
content中存在多个列时,对所有列都设置正内补丁和负外补丁,content模块的最终高度会自动以其中的最高列为准。
5. 使用overflow将content溢出的部分隐藏:
CSS代码示例:
.content{
overflow: hidden;
/**该代码有两重作用:
*① 可解决 left和right设置为float后,造成其父级元素content的塌陷问题;
*② 隐藏content中的left和right溢出的部分。
*/
}
隐藏溢出后的界面如下:
总结:由于模块的背景与其内容的大小无关,可将padding补白的部分全部填充,故可以通过上述方式结合背景色这个障眼法实现等高布局。
附实验的全部代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css等高布局</title>
<style>
header{
height: 80px;
background: #00A3E8;
}
footer{
height: 80px;
background: #C3C3C3;
}
.left{
float:left;
width: 30%;
background: #23B14D;
}
.right{
float: right;
width: 70%;
height: 500px;
background: #FFC90D;
}
.left,.right{
/*正内负外,取相对大的值*/
padding-bottom: 2000px;
margin-bottom: -2000px;
}
.content{
/*隐藏容器溢出+解决父元素塌陷问题*/
overflow: hidden;
}
</style>
</head>
<body>
<header>头部</header>
<div class="content">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<footer>脚部</footer>
</body>
</html>