圣杯布局【双飞翼布局】:两边定宽,中间宽度自适应;且优先渲染中间主题内容部分。
一、负边距法
DOM结构:
由于需要优先渲染主题内容部分,因此在DOM结构中需要将其写在左右侧边栏之前。
<header>header</header>
<main>
<div class="mid">
<div class="middle">middle</div>
</div>
<aside class="left">left</aside>
<aside class="right">right</aside>
</main>
<footer>footer</footer>
样式表:
1. 左中右部分均左浮动,且左右设置定宽,中间设置宽度为100%,此时左右边栏完全被主体部分遮挡。
2. 负边距:左侧边栏的左负边距设置为100%,右侧边距的左负边距设置为自身宽度,此时左侧边栏在主体内容两侧排列,但主体内容位于侧边栏以下部分被遮挡。
3. 设置主体内容部分的左右边距为相应侧边栏宽度,以此收缩自身宽度,使其内容可完全展示。
header{
height: 70px;
background-color: #EFE994;
}
main {
height: 500px;
overflow: hidden;
}
.mid {
float: left;
width: 100%;
height: 100%;
background-color: #98D8DA;
}
.middle {
height:100%;
margin-left: 200px;
margin-right:200px;
}
.left,
.right {
float: left;
width: 200px;
height: 100%;
}
.left {
margin-left: -100%;
background-color: #FAC3FC;
}
.right {
margin-left: -200px;
background-color: #F5C4C4;
}
footer {
height: 50px;
background-color: #EFE994;
}
二、弹性盒模型法
整个页面布局由两个弹性盒模型构成:
1. body作为盒子,header、main、footer按垂直方向排列,上下设置定高之后中间设置flex=1自动填满剩余高度。
2. main作为盒子,left、middle、right按水平方向排列(默认),左右设置定宽后中间设置flex=1自动填满剩余宽度。
3. 设置order=-1将左侧边栏拉到主体内容之前。
<!DOCTYPE html>
<meta charset=utf-8>
<html>
<head>
<title>holy</title>
<style type="text/css">
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer{
flex-basis: 70px;
background-color: #AAD6E1;
}
main {
display: flex;
flex: 1;
}
.middle {
flex: 1;
background-color: #eee;
}
.left,
.right {
flex-basis: 200px;
background-color: #FEDAD6;
}
.left {
order: -1;
}
</style>
</head>
<body>
<header>header</header>
<main>
<div class="middle">middle</div>
<aside class="left">left</aside>
<aside class="right">right</aside>
</main>
<footer>footer</footer>
</body>
</html>