Search code examples
csspositioning

Make a footer stay at the bottom (not necessary "sticky") when the preceding divs have absolue positioning?

I have a page setup like

<div id="container">
<div id="main>
  <div id="sidebar"></div>
  <div id="content"></div>
</div><!-- end main -->
<div id="footer"></div>
</div>

with css:

#container {
 position: relative;
}
#footer {
position: absolute;
bottom: 0px
}
#content {
position: absolute;
}

This works for my default layout, but when I resize to something for mobile (i.e. less that 767 px)...my content becomes so long it runs behind my footer (and "outside" of my container div).

I need to keep the content position: absolute for my mobile layout (so that it runs vertically along with my sidebar, which is partially above the content and partially below the content in the mobile layout). But it seems like the absolute positioning is knocking the content div out of the regular flow so that the footer doesn't end up BELOW my content.

Solution

  • You should not be using absolute positioning unless really required. What you can do in your current setup, is supply height for the contents and make it auto scrollable.

    #content {
position: absolute;
height:400px;
overflow:scroll;
}