- 本文仅简单讨论flex、grid布局方案
- see: https://juejin.cn/post/6844903491891118087
1 左中右（多列等高）
1.1 flex方案
仅需将.wrap设置为flex-direction: column;，即可实现“上中下”布局。见2.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
html,
body {
height: 100%;
margin: 0;
}
.wrap {
display: flex;
/* flex-direction: column; 取消该注释，即可实现“上中下”布局 */
min-height: 100%;
}
.left {
flex: 0 0 200px;
background: lightblue;
}
.main {
flex: 1 1 auto;
/* height: 600px; 仅用于模拟内容高度 */
background: lightpink;
}
.right {
flex: 0 0 100px;
background: lightgreen;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
效果
1.2 grid方案
将grid-template-columns改成grid-template-rows，可变成“上中下”布局。见2.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
html,
body {
height: 100%;
margin: 0;
}
.wrap {
display: grid;
/* grid-template-rows: 200px auto 100px; */
grid-template-columns: 200px auto 100px; /* 将grid-template-columns改成grid-template-rows，可变成“上中下”布局 */
min-height: 100%;
}
.left {
background: lightblue;
}
.main {
background: lightpink;
/* height: 600px; 仅用于模拟内容高度 */
}
.right {
background: lightgreen;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
效果
2 上中下（单列）
- header固定在顶部
- footer固定在底部
2.1 flex方案
仅需去掉.wrap设置flex-direction: column;，即可实现“左中右”布局。见1.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
html,
body {
height: 100%;
margin: 0;
}
.wrap {
display: flex;
flex-direction: column; /* 注释该设置，即可实现“左中右”布局 */
min-height: 100%;
}
.left {
flex: 0 0 200px;
background: lightblue;
}
.main {
flex: 1 1 auto;
/* height: 600px; 仅用于模拟内容高度 */
background: lightpink;
}
.right {
flex: 0 0 100px;
background: lightgreen;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
效果
2.2 grid方案
将grid-template-rows改成grid-template-columns，可变成“左中右”布局.见1.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
html,
body {
height: 100%;
margin: 0;
}
.wrap {
display: grid;
grid-template-rows: 200px auto 100px; /* 将grid-template-rows改成grid-template-columns，可变成“左中右”布局 */
/* grid-template-columns: 200px auto 100px; */
min-height: 100%;
}
.left {
background: lightblue;
}
.main {
background: lightpink;
/* height: 600px; 仅用于模拟内容高度 */
}
.right {
background: lightgreen;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
</body>
</html>
效果
2.3 padding + 负margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
html,
body {
height: 100%;
margin: 0;
}
.wrap {
min-height: 100%;
padding-bottom: 50px; /* footer.height */
overflow: auto;
box-sizing: border-box;
}
.header {
height: 80px;
background: lightblue;
}
.main {
background: lightpink;
/* height: 600px; */
}
.footer {
height: 50px;
background: lightgreen;
margin-top: -50px; /* -height */
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">main</div>
</div>
<div class="footer">footer</div>
</body>
</html>
效果
3 上 + 左右
3.1 flex方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
html,
body {
height: 100%;
margin: 0;
}
.header {
height: 80px;
background: lightgreen;
}
.wrap {
display: flex;
height: calc(100% - 80px);
}
.nav {
flex: 0 0 200px;
background: lightblue;
}
.main {
flex: 1 1 auto;
/* height: 600px; 仅用于模拟内容高度 */
background: lightpink;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="wrap">
<div class="nav">nav</div>
<div class="main">main</div>
</div>
</body>
</html>
效果
4 左 + 上下
4.1 flex方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
height: 100%;
}
.nav {
flex: 0 0 200px;
background: lightblue;
}
.wrap {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.header {
flex: 0 0 80px;
background: lightgreen;
}
.main {
flex: 1 1 auto;
height: calc(100% - 80px);
background: lightpink;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">nav</div>
<div class="wrap">
<div class="header">header</div>
<div class="main">main</div>
</div>
</div>
</body>
</html>
效果