min-height:100% won't work as i want it too

问题

I have a container div, conteining 3 divs, a sidebar, a content and a header while all the elements inside are rendered as they should (they are positioned as "relative" if this may influence in my problem), the sidebar and the content render min-height: 100% as I need, the div containing them won't adapt to those 3 elements, acting like overflow: visible, while I don't want the content to overflow, I want the whole page to scroll and the div to adapt to the content size...

I tried to put my code here : http://jsfiddle.net/vhZV6/

I also cut out some of the graphical tweeks wich should not influence at all... here is a screen of my problem too:

I don't need old broweser integration on this matter (as IE 5/6).

回答1:

Try adding overflow:auto; to your .container div.

回答2:

I would try this. 'height: auto' is no longer set once any of the height elements are messed with.

min-height:100% !important;
height:auto !important;

回答3:

It's a very simple problem: your inner divs are floating. The solution is very simple, just add to your css the following (this is the best solution whenever you have floating divs):

.container:before { 
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden; 
}

来源：https://stackoverflow.com/questions/12534787/min-height100-wont-work-as-i-want-it-too