Forcing Footer to Bottom of Page, Even When Content Doesn't Fill Div

43 Posts

chrison600 Reply #1, 17 years, 6 months ago

Hi all,

I’ve been searching the interwebs for a while today trying to figure out how to essentially force a partially filled div to actually fill the entire available browser window height so the footer sits at the bottom of the browser window, even when the div isn’t full of enough content to get it there. I want the footer to still flow with the height of the page if there is enough content to do so.

I’ve found several helpful posts, but none seem to get the job done (most likely due to my lack of skill). I’d like to get it resolved and thought the folks who’ve worked on MODx templates could help. The most helpful article I’ve found was: http://www.alistapart.com/articles/footers/. I thought this would for sure work, but it doesn’t seem to.

I’m happy to share code. My CSS file is kind of messy. The site I’m working on is a "port" of an existing site, so a lot of the CSS is just baggage from the other site that I haven’t cleaned out.

Right now, I have the html and body tags set at height: 100%, and I have the following div nest:

<div id="main_right">

<div class="menu">[!Wayfinder? &startId=`0` &level=`1`!]</div><!--Close Top Navigation Container-->

<div class="greyline"></div><!--Close Greyline-->
<div class="darkgreyline"></div><!--Close Dark Greyline-->

<div class="content">

<h2>
[*longtitle*]
</h2>

[*content*]
</div><!--Close Content Container-->

<div id="footer">
© Copyright Venhill USA
</div><!--Close Footer Container-->

</div><!--Close Main Right Container-->

The above referenced article suggested some additional CSS settings in the "container" for the content and footer, which is the main_right in my layout.

I think I’ve got everything as referenced, but I still get the same behavior.

See: http://www.venhillusa.com/index.php?id=24

Thanks a bunch for any help,

Chris

43 Posts

chrison600 Reply #2, 17 years, 6 months ago

I just tried the tutorial here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/.

No change, but I suspect that something in the CSS file is redundant or overriding the code. I’m going to try cleaning up the entire CSS dialogue and see what happens. There’s no reason for it to remain so messy...

Chris

150 Posts

goonz39 Reply #3, 17 years, 6 months ago

After you finish cleaning up your CSS files, try this (I might get some names or measurements wrong/off, but replace with relevant names:

#main_right {
position: relative;
}
#content {
padding-bottom:200px;
height: 100%; /*this may need to be edited a bit - look up the hasLayout hack for IE*/
}
#footer {
position: absolute;
bottom:0px;
height: 200px;
}

Hope that helps.

"Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein

16 Posts

btp-design Reply #4, 17 years, 4 months ago

I’ve had success using the guide at http://www.cssstickyfooter.com/

Just be wary of adding heights to elements as that screwed it up for me (made it un-sticky)!