The footer is at the bottom of the page or the bottom of the content (whichever is lower)

Question

I have the following structure:

< /body>I use jav

P粉344355715 · Answer

Ryan Fait’s Sticky Footer is a simple solution that I’ve used many times in the past.

Basic HTML:


    
        CSS Sticky Footer

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Translate this to something similar to what you already got, roughly like this:

HTML：

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Just don't forget to update the negative numbers on the wrapper margins to match the height of the footer and push div. Good luck!

P粉970736384 · Answer

Ryan Fait's Sticky Footer is very good, but I found it lacked basic structure*.

Flexbox version

If you're lucky enough to use Flexbox without having to support older browsers, sticky footers are really easy, and support for dynamically resizing footers.

The trick to making the footer stick to the bottom using Flexbox is to make other elements in the same container bend vertically. All it requires is a full-height wrapper element with display: flex and at least one sibling with a flex value greater than 0: p> CSS：子>

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}


   
     here be header
   
   
   
   
     here be content
   
   
     here be footer