推荐文章：
深入理解圣杯布局和双飞翼布局
双栏布局与三栏布局
两者的区别
-
直观区别:(图片圣杯和双飞翼的描述反了)
- HTML结构上的区别
<!-- 双飞翼布局 -->
<body>
<header>HEADER</header>
<div class="content">
<div class="middle">
<div class="inner-middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer>FOOTER</footer>
</body>
<!-- 圣杯布局 -->
<body>
<header>HEADER</header>
<div class="content">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer>FOOTER</footer>
</body>
| - | 优点 | 缺点 |
|---|---|---|
| 圣杯布局 | 结构简单，无多余 dom 层 | 中间部分宽度小于左侧时布局混乱 |
| 双飞翼布局 | 支持各种宽高变化，通用性强 | dom 结构多余层，增加渲染树生成的计算量 |
圣杯布局
实现思路：
- 左中右三个元素分别左浮动。中间元素占据第一位置优先渲染，设置该元素 width 为 100%
- 左元素设置左边距为-100%以使得左元素上升一行并且处于最左位置，右元素设置左边距为自身宽度的负值使得右元素上升一行处于最右位置。
- 设置父元素的左右 padding 为左右两个元素留出空间，以展示中间元素内容。
- 设置左右元素为相对定位，左元素的 left 和右元素的 right 为内边距的宽度的负值。
<style>
html {
height: 100%;
}
body {
min-width: 100%;
min-height: 100%;
margin: 0;
}
header {
min-width: 100%;
height: 40px;
background-color: cadetblue;
}
footer {
min-width: 100%;
height: 30px;
background-color: tomato;
position: absolute;
bottom: 0;
}
.content {
height: calc(100vh - 70px);
padding: 0 100px 0 100px;
overflow: hidden;
}
.middle {
float: left;
height: 100%;
width: 100%;
background-color: gray;
}
.left {
float: left;
background-color: pink;
width: 100px;
height: 100%;
margin-left: -100%;
position: relative;
left: -100px;
}
.right {
float: left;
background-color: orange;
width: 100px;
height: 100%;
margin-left: -100px;
position: relative;
right: -100px;
}
</style>
双飞翼布局
实现思路:
- 左中右三个元素分别左浮动。中间元素占据第一位置优先渲染，设置该元素 width 为 100%
- 左元素设置左边距为-100%以使得左元素上升一行并且处于最左位置，右元素设置左边距为自身宽度的负值使得右元素上升一行处于最右位置。
- 设置中间元素的子元素左右边距为左右元素留空位，以展示中间元素内容。
<style>
html {
height: 100%;
}
body {
min-width: 100%;
min-height: 100%;
margin: 0;
}
header {
min-width: 100%;
height: 40px;
background-color: cadetblue;
}
footer {
min-width: 100%;
height: 30px;
background-color: tomato;
position: absolute;
bottom: 0;
}
.content {
height: calc(100vh - 70px);
overflow: hidden;
}
.middle {
float: left;
height: 100%;
width: 100%;
}
.inner-middle {
margin: 0 100px;
height: 100%;
background-color: blue;
}
.left {
float: left;
background-color: pink;
width: 100px;
height: 100%;
margin-left: -100%;
}
.right {
float: left;
background-color: orange;
width: 100px;
height: 100%;
margin-left: -100px;
}
</style>
三栏布局的flex实现
<style>
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
header {
width: 100%;
height: 40px;
background-color: cadetblue;
}
.content {
flex: 1;
display: flex;
}
.content .middle {
flex: 1;
}
.content .left,
.content .right {
width: 100px;
background-color: pink;
}
.content .left{
order: -1;
}
footer {
width: 100%;
height: 30px;
background-color: tomato;
}
</style>
网友评论