聖盃佈局【雙飛翼佈局】的幾種實現
阿新 • • 發佈：2019-01-10
聖盃佈局【雙飛翼佈局】：兩邊定寬，中間寬度自適應；且優先渲染中間主題內容部分。
一、負邊距法
DOM結構：
由於需要優先渲染主題內容部分，因此在DOM結構中需要將其寫在左右側邊欄之前。
<header>header</header>
<main>
<div class="mid">
<div class="middle">middle</div>
</div>
<aside class="left"> 樣式表：
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;
} 二、彈性盒模型法
整個頁面佈局由兩個彈性盒模型構成：
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>