How to keep the footer at the bottom of the page gracefully

skill • 2 years ago • Lao Li next door Last edited on 2022-06-10 16:32:51

See Tuoyuan's ZBlog Someone in the group asked why the pure theme footer was not at the bottom.

After looking at the screenshot, I found that the reason is that there are too few articles and not enough content parts, so some blank spaces will be left at the bottom of the page

How to keep the footer at the bottom of the page elegantly

The more violent solution is to add a minimum height to the main part

For example:

 section {     min-height:1080px; }

However, this method is not friendly to adaptive pages, so it is changed to:

 section {     min-height:100vh; }

After further optimization, the height of the header and footer can be subtracted:

 section { min-height: calc(100vh - 160px); }

Or use JS to judge the window height so that the footer is always at the bottom

 $(document).ready(function(){     if($(document.body).height()<$(window).height()){         $("footer").css({"position":"fixed","bottom":"0px"});     } })

Is there any more elegant way?

In early years, the absolute position may be used to solve problems, such as:

 <! doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled document</title> <style> * {     margin: 0;     padding: 0 } body, html {     height: 100%; } .container {     position: relative;     padding-bottom: 150px; /*Greater than or equal to the height of footer*/     width: 100%;     min-height: 100%;     box-sizing: border-box; } header {     width: 100%;     height: 100px; } section {     width: 100%;     height: 300px; } footer {     position: absolute;     width: 100%;     height: 150px;     left: 0;     bottom: 0; } </style> </head> <body> <div class="container">   <header>header</header>   <section>content</section>   <footer>footer</footer> </div> </body> </html>

But now, I may prefer another way - flex layout

Flexbox is a new layout model provided by css3. It can be said that once used, it cannot be returned~~

like this:

 <! doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled document</title> <style> * {     margin: 0;     padding: 0 } html {     height: 100%; } body {     display: flex;     flex-direction: column;     height: 100%; } header {     flex: 0 0 auto; } section {     flex: 1 0 auto; } footer {     flex: 0 0 auto; } </style> </head> <body> <header>header</header> <section>content</section> <footer>footer</footer> </body> </html>

For the basic knowledge of flexbox, it is recommended to read: Ruan Yifeng's Flex layout tutorial

This article is written by@ Lao Li next door Published on June 10, 2022 on Yeluzi Blog , unless otherwise specified, all articles in this blog are original, please retain the source for reprinting.

comment (3)

zzzzzzz visitor

Chunxiaobai doesn't know how to use it. Where to add it? Is there a god who can give you detailed advice?
Also, I use Tuoyuan Pure Theme. Some of the highlighted code of this blogger will be very dark. I've been tuning for a long time, but it's useless. Just change the theme. Why

2022-07-12 16:33:33 · From Xinyang City, Henan Province · reply