Jump to content

Can The Footer To Cling To Bottom Of Browser?


alembic
 Share

Recommended Posts

Hi Y'all,Is there a way to make <div class="footer">...</div> 'cling' to the bottom of the browser window, even when vertically resized? Here's an example of what I mean - http://www.insung.info/about.html. From viewing the page source, I see this page uses <table>, but I want to use only css.My css layout is:<div class=pageContainer> <div class=pageHeader>...</div> <div class=pageBody>...</div> <div class=pageFooter>...</div></div>I make the header and footer fixed height. I make html, body height 100%, and I make pageBody height 100%. But alas...What I want is for pageBody to expand in height as the browser height is resized, keeping pageFooter at the bottom of the browser window. But it ain't happnin. The pageBody is only max what's needed for the text inside. What do ya think?Thanks heaps,JoshHere's my css so far:/* *********************************** */html, body {height: 100%;margin: 0px 0px 0px 0px;}/* --------------------------------------------------- */.pageContainer{position: relative;width: 788px;margin: 0px auto;height: 100%;}/* --------------------------------------------------- */.pageHeader{display: table;position: relative;width: 100%;height: 220px;}/* --------------------------------------------------- */.pageBody {height: 100%;}/* --------------------------------------------------- */.pageFooter {padding: 10px 0px 20px 0px;height: 50px;}/* ************************************ */

Link to comment
Share on other sites

Sorry for the late reply.Thanks for this. I had researched this topic in the forums first, and found this post and lots of others. I have tried it but it's not working for me. That said, I have tried many permutations so things are getting a little muttled now. A potentially significant difference is that I'm putting "display: table" in pageHeader. However if I remove this one property, then the background color of pageBody goes up into pageHeader (I left color and font properties out of my example).I'll go back to square one using the previous post and report back (which may be a day or two).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...