經典的上-中-下佈局。css
當頁面內容高度小於可視區域高度時,footer 吸附在底部;當頁面內容高度大於可視區域高度時,footer 被撐開排在 content 下方html
demo linkgit
<body>
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</body>複製代碼
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
article {
flex: auto;
}複製代碼
在上-中-下佈局的基礎上,加了左側定寬 sidebar。github
demo linkide
<body>
<header>HEADER</header>
<div class="content">
<aside>ASIDE</aside>
<article>CONTENT</article>
</div>
<footer>FOOTER</footer>
</body>複製代碼
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: auto;
display: flex;
}
.content article {
flex: auto;
}複製代碼
左邊是定寬 sidebar,右邊是上-中-下佈局。佈局
demo linkflex
<body>
<aside>ASIDE</aside>
<div class="content">
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</div>
</body>複製代碼
body {
min-height: 100vh;
display: flex;
}
aside {
flex: none;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
}
.content article {
flex: auto;
}複製代碼
仍是上-中-下佈局,區別是 header 固定在頂部,不會隨着頁面滾動。spa
<body>
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</body>複製代碼
body {
min-height: 100vh;
display: flex;
flex-direction: column;
padding-top: 60px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
}
article {
flex: auto;
height: 1000px;
}複製代碼
左側 sidebar 固定在左側且與視窗同高,當內容超出視窗高度時,在 sidebar 內部出現滾動條。左右兩側滾動條互相獨立。code
<body>
<aside>
ASIDE
<p>item</p>
<p>item</p>
<!-- many items -->
<p>item</p>
</aside>
<div class="content">
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</div>
</body>複製代碼
body {
height: 100vh;
display: flex;
}
aside {
flex: none;
width: 200px;
overflow-y: auto;
display: block;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content article {
flex: auto;
}複製代碼