Hi,
I swear I had this working before but somehow its broken and I can't figure out why! =(
I want a 100% height/width parent(#wrapper) with a sticky bottom footer and a content container(#body) with a fixed width, margin:auto and 100% height to meet the footer.
All is working apart from my #body doesn't have a 100% height.
#wrapper { width:100%; height:100% !important; height:auto !important; min-height:100% !important; position:relative; } #body { width:1160px; height:100% !important; height:auto !important; min-height:100% !important; margin:0 auto 0 auto; } #footer { width:100%; height:50px; bottom:0; left:0; position:absolute; }
<div id="wrapper"> <div id="body></div> <div id="footer> </div> </div>
Hi bcraig, Working with 100%
Hi bcraig,
Working with 100% can be confusing, as you need to know what the 100% is a percentage of, it's usually the parent/containing element.
You should try and remove all cases of !important, using it is bad practice and should be avoided.
The order of rules is important, so when you have:
height:100% !important;
height:auto !important;
the last one wins.
If you have height:100%; then min-height:100%; is not going to do anything or make any sense.
There should be some articles in the How to section that will help with understanding 100%.