聖盃佈局【雙飛翼佈局】的幾種實現
阿新 • • 發佈:2019-01-10
聖盃佈局【雙飛翼佈局】:兩邊定寬,中間寬度自適應;且優先渲染中間主題內容部分。
一、負邊距法
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>