您可以在 github 仓库中找到这篇文章中的所有代码。
您可以在这里查看视觉效果：
- 固定导航 - 布局 - codesandbox
- 两列 - 布局 - codesandbox
- 三列 - 布局 - codesandbox
- 圣杯 - 布局 - codesandbox
通过 css 实现通用布局
固定导航布局
fixed navigation
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
nav {
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
}
两列布局
two columns layout
left side
right side
.float-container .left {
width: 200px;
float: left;
background-color: tomato;
}
.float-container .right {
margin-left: 200px;
background-color: aqua;
}
.absolute-container {
position: relative;
}
.absolute-container .left {
width: 200px;
position: absolute;
top: 0;
left: 0;
background-color: tomato;
}
.absolute-container .right {
margin-left: 200px;
background-color: aqua;
}
.bfc-container .left {
width: 200px;
float: left;
background-color: tomato;
}
.bfc-container .right {
overflow: hidden;
background-color: aqua;
}
.flex-container {
display: flex;
}
.flex-container .left {
width: 200px;
background-color: tomato;
}
.flex-container .right {
flex: 1;
background-color: aqua;
}
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}
.grid-container .left {
background-color: tomato;
}
.grid-container .right {
background-color: aqua;
}
.table-container {
display: table;
}
.table-container .left {
display: table-cell;
background-color: tomato;
}
.table-container .right {
display: table-cell;
background-color: aqua;
}
三列布局
three columns layout
left
middle
right
left
middle
right
left
middle
right
left
middle
right
.flex-container {
display: flex;
}
.flex-container .left {
width: 200px;
background-color: tomato;
}
.flex-container .middle {
flex: 1;
background-color: blanchedalmond;
}
.flex-container .right {
width: 200px;
background-color: aqua;
}
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
.grid-container .left {
background-color: tomato;
}
.grid-container .middle {
background-color: blanchedalmond;
}
.grid-container .right {
background-color: aqua;
}
.absolute-container {
position: relative;
}
.absolute-container .left,
.absolute-container .right {
position: absolute;
width: 200px;
top: 0;
}
.absolute-container .left {
left: 0;
background-color: tomato;
}
.absolute-container .right {
right: 0;
background-color: aqua;
}
.absolute-container .middle {
margin-left: 200px;
margin-right: 200px;
background-color: blanchedalmond;
}
.float-container .left {
width: 200px;
float: left;
background-color: tomato;
}
.float-container .right {
width: 200px;
float: right;
background-color: aqua;
}
.float-container .middle {
margin-left: 200px;
margin-right: 200px;
background-color: blanchedalmond;
}
圣杯
holy grail
header
main
body {
min-height: 100vh;
}
#root {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header,
nav,
main,
aside,
footer {
text-align: center;
padding: 12px;
}
header {
height: 60px;
background-color: tomato;
}
.columns {
display: flex;
flex-grow: 1;
}
nav {
flex-shrink: 0;
width: 100px;
background-color: coral;
}
main {
flex-grow: 1;
background-color: moccasin;
}
aside {
flex-shrink: 0;
width: 100px;
background-color: sandybrown;
}
footer {
height: 100px;
background-color: slategray;
}
参考
- 圣杯（网页设计）- wikipedia.org
- 圣杯布局 - web.dev
