• Locked
1 reply [Last post]
Wed, 2012-10-10 09:35
bcraig
Offline
newbie
New Zealand
Last seen: 8 years 11 weeks ago
New Zealand
Timezone: GMT+13
Joined: 2009-07-23
Posts: 5
Points: 5

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>

Top
Tags:
Wed, 2012-10-10 22:02
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 13 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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:

Quote:

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%.

Top
  • Locked