实现三栏布局的十三种方法
- 实现上下定高,中间自适应页面(六种)
- 可以采用flex,calc,vh,定位,grid,table
- 实现左右定宽，中间自适应的页面布局(七种)
- 可以采用固定定位,浮动定位,flex,grid,table,圣杯,双飞翼
<!DOCTYPE html>
<html lang="en">
<head>
<title>三栏布局-宅男呀</title>
<style>
/* reset */
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
/* base */
.content {
width: 100%;
height: 100%;
position: relative;
}
header,
footer,
.left,
.right {
background-color: #eee;
}
main,
.center {
background-color: chocolate;
}
/* 定高 */
/* flex 布局 */
div {
display: flex;
flex-direction: column;
}
header,
footer {
width: 100%;
height: 50px;
}
main {
flex: 1;
}
/* 动态计算 */
/*
header,
footer {
height: 50px;
}
main {
height: calc(100% - 100px);
}
*/
/* vh单位 */
/*
header,
footer {
width: 100%;
height: 10vh;
}
main {
width: 100%;
height: 80vh;
}
*/
/* 定位脱离文档流 */
/* header {
height: 50px;
width: 100%;
}
footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
}
main {
width: 100%;
position: absolute;
top: 50px;
bottom: 50px;
} */
/* grid布局 */
/* .content {
display: grid;
grid-template-rows: 50px auto 50px;
} */
/* table布局 */
/* .content {
display: table;
}
header,
footer,
main {
display: table-row;
}
header,
footer {
height: 50px;
} */
/* 定宽 */
/* flex 布局 */
/*
.content {
display: flex;
flex-direction: row;
}
.left,
.right {
width: 50px;
height: 100%;
}
.center {
flex: 1;
}
*/
/* 定位脱离文档流 */
/*
.left,
.right {
position: absolute;
width: 50px;
height: 100%;
}
.right {
top: 0;
right: 0;
}
.center {
margin: 0 50px;
height: 100%;
}
*/
/* 浮动脱离文档流,后面元素会到前面来 */
/*
.left,
.right {
width: 50px;
height: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
margin: 0 50px;
height: 100%;
}
*/
/* grid布局 */
/* .content {
display: grid;
grid-template-columns: 50px auto 50px;
} */
/* table布局 */
/* .content {
display: table;
}
.left,
.right,
.center {
display: table-cell;
}
.left,
.right {
width: 50px;
} */
/* 圣杯布局 */
/* .content {
padding: 0 50px;
width: auto;
}
.left,
.right,
.center {
float: left;
position: relative;
height: 100%;
}
.left {
width: 50px;
left: -50px;
margin-left: -100%;
}
.right {
right: -50px;
width: 50px;
margin-left: -50px;
}
.center {
width: 100%;
} */
/* 双飞翼 */
/* .left,
.right,
.center {
float: left;
height: 100%;
}
.left {
width: 50px;
margin-left: -100%;
}
.right {
width: 50px;
margin-left: -50px;
}
.center {
width: 100%;
}
.main {
padding: 0 50px;
height: 100%;
} */
</style>
</head>
<body>
<!-- 定高 -->
<div class="content">
<header>header</header>
<main>main</main>
<footer>footer</footer>
</div>
<!-- 定宽 -->
<!-- <div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div> -->
<!-- 浮动布局 start -->
<!-- <div class="content">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div> -->
<!-- 浮动布局 end -->
<!-- 圣杯布局 -->
<!-- <div class="content">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div> -->
<!-- 双飞翼 -->
<!-- <div class="content">
<div class="center">
<div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div> -->
</body>
</html>