search

Home  >  Q&A  >  body text

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

I have the following structure: 

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

I use javascript to dynamically load the content in

. Therefore, the height of the
block may change.


I would like the

block to be at the bottom of the page when there is a lot of content, or at the bottom of the browser window when there are only a few lines of content.


Currently I can choose one or the other...but not both.

Does anyone know how I can do this - have

paste to the bottom of the page/content or the bottom of the screen, whichever is lower.


P粉716228245P粉716228245436 days ago512

reply all(2)I'll reply

  • P粉344355715

    P粉3443557152024-01-22 14:23:30

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

    Basic HTML:

    <div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

    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：

    <body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

    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!

    reply
    0
  • P粉970736384

    P粉9707363842024-01-22 10:09:20

    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: <子>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;
}
    <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

    reply
    0
  • Cancelreply