Sticky Footer
Classic top – middle – bottom layout.
When the height of the page content is less than the height of the viewable area, the footer sticks to the bottom; When the height of the page content is greater than the height of the viewable area, the footer is spread out and placed below the content
demo link
<body>
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</body>Copy the code
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
article {
flex: auto;
}Copy the code
Fixed-Width Sidebar
On the basis of up-middle-down layout, the left fixed-width sidebar is added.
demo link
<body>
<header>HEADER</header>
<div class="content">
<aside>ASIDE</aside>
<article>CONTENT</article>
</div>
<footer>FOOTER</footer>
</body>Copy the code
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: auto;
display: flex;
}
.content article {
flex: auto;
}Copy the code
Sidebar
Fixed-width sidebar is on the left and up-middle-down layout is on the right.
demo link
<body>
<aside>ASIDE</aside>
<div class="content">
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</div>
</body>Copy the code
body {
min-height: 100vh;
display: flex;
}
aside {
flex: none;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
}
.content article {
flex: auto;
}Copy the code
Sticky Header
It’s still a top-middle-down layout, except that the header is fixed at the top and doesn’t scroll along the page.
demo link
<body>
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</body>Copy the code
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;
}Copy the code
Sticky Sidebar
The left sidebar is fixed to the left and at the same height as the window. When content exceeds the window height, a scroll bar appears inside the sidebar. The left and right scroll bars are independent of each other.
demo link
<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>Copy the code
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;
}Copy the code