CODEWITHSUNDEEP
css
ilivewithian
ilivewithian

Reputation: 19692

Making a CSS footer either sit at the bottom of the browser window or bottom of content

Duplicate of this question.

I've got an existing site (jacquelinewhite.co.uk), on it there is a footer. Currently this footer always sits underneath the main content. I'm trying to make it float to the bottom of the browser window, or if the content is bigger than the window, stay at the bottom of the content.

Effectively the HTML is structured like this:

<div id="container">
  <div id="top_bar">
  </div>
<div id="header">
</div>
<div id="left_menu">
</div>
<div id="right_content">
</div>
<div class="clear">
</div>
<!-- FOOTER AREA -->
<div id="footer">
</div>
<!-- END FOOTER AREA -->
</div>

I have tried absolute position, bottom 0, which puts the footer at the bottom of the window, but if the content of the window is bigger then the footer covers the content.

How should I fix this?

Upvotes: 14

Views: 36759

Answers (3)

Paul Taylor
Paul Taylor

Reputation: 13190

Assuming you are using footer() element I found just adding this to CSS worked for me

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

Upvotes: 1

Josh Stodola
Josh Stodola

Reputation: 82483

Test drive this...

  body {
    margin:0;
    padding:0;
    z-index:0;
  }

  #toolbar {
    background:#ddd;
    border-top:solid 1px #666;
    bottom:0;
    height:15px;
    padding:5px;
    position:fixed;
    width:100%;
    z-index:1000;
  }

Upvotes: 4

Chad Birch
Chad Birch

Reputation: 74528

This one's always worked well for me: CSS Sticky Footer

Upvotes: 31

Related Questions