Sticky footer sticks, but content won't?

IMO: Will not work 100% without min-height. (see comments) My old answer: Edited sample (as fork): jsfiddle.net/4EtKh/1/ #wrapper: { /*min-height:100%;*/ /* remove! */ position:relative; height:100%; /* new!

*/ overflow: hidden; /* new! */ } #content { text-align: left; line-height: 140%; background: #fff; font-size: 1.2em; /*min-height: 80px;*/ /* remove! */ height: 100%; /* new!

*/ }.

I colored the footer red to clarify the elements visually. - I also tested this solution on your page with firebug. It works.

– Smamatti Oct 22 at 14:03 Thanks, but the problem with this solution is that I lose the ability to scroll the contents of #content if there's too much in it. – Echilon Oct 22 at 15:20 1 Oh, that's a bummer. Didn't think of overflow working this way.Sorry.

I'm afraid I can't think of any other solution without using min-height, because overflow: scroll; is not what anyone would want. Otherwise your footer always will be at the bottom of the content, not at the bottom of the page, when the content is empty. – Smamatti Oct 22 at 15:30 1 It was an excellent answer though, thanks for trying.

I can't believe this is so difficult, I'm forever wrestling with footers. – Echilon Oct 22 at 16:18.

Chances are good that you're going to need to set min-height: 100%; and subtract the footer height using negative margin. #wrapper { margin-bottom: -60px; } #footer { height: 60px; } What are your target browsers? You express some concerns about min-height - why not design the footer to look acceptable if collapsed, so that it degrades nicely in an older browser?

If you're using a sidebar in your finished design, you can use . Clearfix techniques to force the footer to the bottom, which means it won't necessarily be noticeable. Aside from doing position:fixed; on the footer and using a background image on your #wrapper to give the impression of a full-height content pane, I don't know of a way to make this work without using min-height on #content (like this).

I don't know how to do this since Echilon has mixed absolute (px) and relative (percent) sizes for the containers. – Smamatti Oct 23 at 10:48 Ah, sorry, I phrased that poorly. The margin-bottom will need to equal the negative of the footer height.

See this example. – egid Oct 23 at 17:06.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions