...

View Full Version : How to fix position of the Footer?



sdsdsd
02-20-2009, 09:07 PM
How can I make the footer stay at the bottom of my page? Right now, in the body, I can load different reports with different heights and if a report is very short, the footer jums up to the middle of the page (or screen)!

BoldUlysses
02-20-2009, 09:14 PM
Are you wanting:

1. The footer to stick to the bottom of the browser window all the time as content scrolls underneath (a la Facebook)?
2. The footer to stick to the bottom of the browser window until there's enough content to fill the window and cause it to scroll, at which point the footer sticks to the bottom of the content?

If #1, use absolute positioning:


#footer {
position:absolute;
bottom:0;
}

If #2, use the sticky footer method (http://ryanfait.com/sticky-footer/) (wow, that just sounds dirty, doesn't it?) :p

sdsdsd
02-23-2009, 06:02 PM
Thank you for your response. I need to implement #2. So I followed the second solution. It helped and the footer moved down a little but not all the way! So, I still need to investigate why the footer is still floating in my servlet application. Any idea? Thanks.

BoldUlysses
02-23-2009, 06:07 PM
We'll need a link to your page (preferable) and/or your full code (HTML and CSS), posted in [CODE][/CODE] tags.

sdsdsd
02-23-2009, 07:10 PM
Unfortunately I cannot give the link to the page since it's not my own page and it's company's proprietary. However, here is the code for the main body tag:

<body>
<div class="wrapper">
<tiles:insert attribute="header"/>
<tiles:insert attribute="navigation"/>
<tiles:insert attribute="body"/>
</div>
<div class="push"></div>

<div class="footer">
<tiles:insert attribute="footer"/>
</div>

</body>

The attribute "body" is replaced by different jsp panels based on the user selection. Each jsp start with a table tag. Hope this is useful info! Thanks.

BoldUlysses
02-23-2009, 07:13 PM
Edit: Try putting #push inside #wrapper:


<body>
<div class="wrapper">
<tiles:insert attribute="header"/>
<tiles:insert attribute="navigation"/>
<tiles:insert attribute="body"/>
<div class="push"></div>
</div>

<div class="footer">
<tiles:insert attribute="footer"/>
</div>

</body>

If that doesn't work, post your CSS.

sdsdsd
02-23-2009, 07:34 PM
It did not work!
The css file is huge! But here is what I have changed for this problem:

.html {
height: 100%;
}

.body {
height: 100%;
color: #333333;
margin: 0px;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142em;
}
.footer, .push {
height: 142px;


}

BoldUlysses
02-23-2009, 07:46 PM
You have mismatched units:


.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142em;
}
.footer, .push {
height: 142px;
}

Try changing it to:


margin: 0 auto -142px;

Also make sure #push is inside #wrapper as recommended above. That's the required div structure.

sdsdsd
02-23-2009, 07:57 PM
Thanks for noticing the units. I fixed them. But still it is not working. I created a simple html page and this method worked for it, but not this application. It seems that the body portion does not get the 100% height, I don't know why. I think that's why footer jumps up.

BoldUlysses
02-23-2009, 08:01 PM
All the code you posted works fine in my test file. In other words, we can't do much more without a link to your page or your complete code (HTML and CSS). There's probably something else getting in the way.

sdsdsd
02-23-2009, 09:40 PM
I am sure there is something in the code. This is an old application that many people have worked on it and it's poorly designed! Let me see what I can find in this mess!
Thank you for your help and your time. :)

bigonroad
06-28-2010, 09:03 AM
I'm intrigued about option 1. How do you get that to work? At the moment, on a long page the page continues underneath it.

Bless,
Chris



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum