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

demo 1 – Sticky Footer

<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

demo 2 – Fixed-Width Sidebar

<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

demo 3

<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

demo 4 – Sticky Header

<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

demo 5 – Sticky Sidebar

<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