alembic Posted August 24, 2009 Report Share Posted August 24, 2009 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 More sharing options...
dsonesuk Posted August 24, 2009 Report Share Posted August 24, 2009 this topic was covered here http://w3schools.invisionzone.com/index.php?showtopic=26802 and http://matthewjamestaylor.com/blog/keeping...tom-of-the-page Link to comment Share on other sites More sharing options...
alembic Posted August 25, 2009 Author Report Share Posted August 25, 2009 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now