css - Footer at bottom of page or content, whichever is lower

Question

Welcome To Ask or Share your Answers For Others

css - Footer at bottom of page or content, whichever is lower

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - Footer at bottom of page or 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 dynamically load content in the <article> using javascript. Because of this, the height of the <article> block can change.

I want the <footer> 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 only a few lines of content exist.

At the moment I can do one or the other... but not both.

So does anyone know how I can do this - get the <footer> to stick to the bottom of the page/content or the bottom of the screen, depending on which is lower.

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T22:10:19+0000

Ryan Fait's sticky footer is very nice, however I find its basic structure to be lacking*.

Flexbox Version

If you're fortunate enough that you can use flexbox without needing to support older browsers, sticky footers become trivially easy, and support a dynamically sized footer.

The trick to getting footers to stick to the bottom with flexbox is to have other elements in the same container flex vertically. All it takes 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>

Categories

css - Footer at bottom of page or content, whichever is lower

css - Footer at bottom of page or content, whichever is lower

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Flexbox Version

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags