monkeytooth Posted June 2, 2011 Share Posted June 2, 2011 You know Im sure I can google this and find it, if.. I was looking for the right thing. But basically what I want is the ability to have my footer always be at the bottom unless the content spans lower than the screen. Lets just say for the sake of ease I have a rather simple Header, Content, Footer style template. Taking into mind that resolutions on everyones PC's are different, and there browsers are different and so on and so forth.. whats the best way to get my footer to only be at the bottom of the page when the content itself isn't filling the page lets say I've only got a couple lines of content on one page I dont want the footer to bounce up to match that. I do want a footer though. Quote Link to comment https://forums.phpfreaks.com/topic/238243-footers/ Share on other sites More sharing options...
jmahdi Posted June 2, 2011 Share Posted June 2, 2011 maybe i can help here... you can have a main div with a certain height and and within this main div you can have a number of divs with a height set to a PERCENTAGE of that main div's height, the last div within this main div would be the footer. so for example you call the first div within the main div HEADER you can give it a height of say 15% and CONTENT div 80% and finally a FOOTER div with height 5% and this should guarantee that this footer is always at the bottom, and the leaset in size... hope this helps... Quote Link to comment https://forums.phpfreaks.com/topic/238243-footers/#findComment-1224423 Share on other sites More sharing options...
monkeytooth Posted June 3, 2011 Author Share Posted June 3, 2011 I was thinking about percents.. but the header/footer would actually be hight specific, well maybe not the footer (on this particular page at least). Which throws my ideas off on the percentage base. I was thinking of a fixed position element but even then that makes no sense to me with the ideal concept I would like to have.. Im thinking min-height on the content element may be my best bet, but how far does min-height go back? does IE 6 support it? Even though min-height doesnt cover my bases on all resolutions, it covers my bases to an exent, larger resolutions I guess will just be what it is, maybe I can work something up in JavaScript to get the height/width of the viewing pane and set it accordingly if the height exceed's the min-height I would set. I dunno.. much to think about I supose, thank you. Quote Link to comment https://forums.phpfreaks.com/topic/238243-footers/#findComment-1224467 Share on other sites More sharing options...
jmahdi Posted June 3, 2011 Share Posted June 3, 2011 I was thinking about percents.. but the header/footer would actually be hight specific, well maybe not the footer (on this particular page at least). Which throws my ideas off on the percentage base. I was thinking of a fixed position element but even then that makes no sense to me with the ideal concept I would like to have.. Im thinking min-height on the content element may be my best bet, but how far does min-height go back? does IE 6 support it? Even though min-height doesnt cover my bases on all resolutions, it covers my bases to an exent, larger resolutions I guess will just be what it is, maybe I can work something up in JavaScript to get the height/width of the viewing pane and set it accordingly if the height exceed's the min-height I would set. I dunno.. much to think about I supose, thank you. try this: <body> <div id="Main" style="width:800px; height:800px; background: green; margin: auto; padding: 5px;"> <div id="Header" style="height:10%; background:red;"> <div id="Content" style="height:85%; background:yellow;">Content</div> <div id="Footer" style="height:5%; background:blue;">Footer</div> </div> </body> the colors show the effect Quote Link to comment https://forums.phpfreaks.com/topic/238243-footers/#findComment-1224529 Share on other sites More sharing options...
cssfreakie Posted June 3, 2011 Share Posted June 3, 2011 it's called a sticky footer: http://ryanfait.com/sticky-footer/ Quote Link to comment https://forums.phpfreaks.com/topic/238243-footers/#findComment-1224676 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.