How to Get Page Content to Stretch and Stick Footer to Bottom of Page

How to get page content to stretch and stick footer to bottom of page?

What you're looking for is a "sticky footer".

• The older CSS-only way of doing this requires that you know the exact height of the footer. The best solution I was able to find through a quick Google search is Ryan Fait's Sticky Footer. Ryan's tutorial works by putting a height of 100% on a wrapper element (which contains your content except the footer). This 100% height is what makes your content push the footer to the bottom of the window, and then the footer worms its way back up into the visible area using a negative margin (which is why you need to know the height of the footer… the negative margin must be the same height as the footer element). There are a few additional pieces to make it work reliably in all browsers (like the <div class="push"></div>), but that's basically what's happening.

• A newer CSS-only solution requires the use of display: table; (not supported by IE7), but allows for a variable height footer (see Sticky CSS footers: The flexible way). This is probably the method I would recommend.

The author of the second article mentions that Javascript could be used to add IE7 support, but stops short of writing the actual Javascript. At the time of this answer, StatCounter lists IE7 as having roughly 1.28% market penetration. I'll leave it to you to determine if IE7 support is important, but I'd like to add my $0.02 if I may :-p First, all users of IE7 have an upgrade path to IE8, and users who refuse to update are only making life more difficult for web developers (IE7 to IE8 open up possibilities for many important CSS2 selectors, as well as fixing many nagging float issues and making display: table; possible). In addition to making life harder for web developers, they are leaving themselves open to a multitude of browser hacks that will compromise their computer, making them an easy target for hackers looking to expand their zombie army (which makes security more difficult for everyone else). Second, Do websites need to look exactly the same in every browser? (and of course, the answer is "No") As long as having a footer on the bottom of the browser window can be considered a progressive enhancement, you shouldn't need to worry.

That being said… I updated the code so it should work in IE7 :-p Please take a look at the jsfiddle and let me know how it works.

How to stick the footer to bottom and stretch sidebar and content divs to the footer?

for the flex model, i would go this way:

body * {  box-sizing: border-box;/* includes borders & padding  into size calculation*/  white-space: pre;/* demo purpose only */}html:hover {font-size:2em;/* demo purpose only */}html {  height: 100%;/* needed so can be inherited & used by body */}body {  height: 100%;/* it can grow */  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-flex-flow: column;      -ms-flex-flow: column;          flex-flow: column;  margin: 0;/* reset */}main {  -webkit-box-flex: 1;  -webkit-flex: 1;      -ms-flex: 1;          flex: 1;/* fill up whole space avalaible */  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;/* inbrication for side by side same height children */}header,footer {  background: #7092BF;  border: solid;  width: 100%;  /* no height or flex value needed */}section {  border: solid;  background: #9AD9EA;  -webkit-box-flex: 1;  -webkit-flex: 1;      -ms-flex: 1;          flex: 1/* fill up whole space avalaible */}aside {  border: solid;  width: 200px;/* any value/unit */  background: #3E48CC}

<header>  any height header</header><main>  <aside>    aside    aside    aside    aside  </aside>  <section>        Hover me & test me full page too    content    content    content    content  </section></main><footer>  any height footer  any height footer</footer>

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

1. Have a <div> with class="wrapper" for your content.

2. Right before the closing </div> of the wrapper place the
   <div class="push"></div>.

3. Right after the closing </div> of the wrapper place the
   <div class="footer"></div>.

* {
    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 */
}

stretch div content to the fixed position footer at the bottom of the page

I'm assuming that's what you need.

Check Working example at http://jsfiddle.net/hk4p5/2/

how can i extend a footer to bottom of page?

I was searching for a solution to this exact problem, and I came across a very simple way of achieving the effect I was going for:

footer {
    box-shadow: 0 50vh 0 50vh #000;
}

This creates a shadow which will fall off the screen if not needed, but otherwise will give 100vh (a full viewport height's worth) of coverage to the space below the footer, so the body background doesn't appear below it.

How to make footer go to bottom when there isn't enough content on page

If you don't care about IE < 10 you can use flex.
It's really simple, but as mentioned it's only for "modern" browsers.

HTML:

<body>
    <main>
        <!-- main content goes here -->
    </main>
    <footer>

    </footer>
</body>

CSS:

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

---

Related Topics