Firefox 100% Height Bug Fix
Hello
I have to post this because I want to spread the word. I haven’t had this problem for a very long time because of the designs of my sites. But today I’ve been working on rebuilding someone’s site with valid mark-up, and while converting the table-based layout to semantic divs – I encountered the dreaded Firefox Height bug.
This problem is when you have a ‘container’ or ‘wrapper’ div that has a background image, colour or border that you want to repeat to the bottom. Unfortunately, specifying 100% height in your CSS for the html or body just doesn’t cut it – the background will only stretch to the bottom of the viewable window and no further when you scroll, or for some reason just doesn’t even display at all.
Anyway, after lots of hunting and stressing out, I’ve found a fix which wonderfully works! As so:
#wrapper {
width: 775px;
min-height: 100%;
margin: 0 auto;
border: 1px solid #888;
}.clearfix:after,div#wrapper:after {
content: “.”;
display: block;
clear: both;
height: 0;
font-size:0;
visibility:hidden;
}
.clearfix,div#wrapper {display: inline-block;}/* Hide from IE5/Mac \*/
* html .clearfix {height: 1px;}
* html div#wrapper {height:100%;}
.clearfix,div#wrapper {display:block;}
/* End hide */
In the instance of my example, I use ‘wrapper’ whereas many use container or something similar.
It works for me – I sincerely hope people discover this and find it useful. Let me know if it helps!
- Share:
-
Sergio said:
Is it possible to get the full html you used?
Thanx!
admin said:
Sure, I’ve emailed you the link to the site… didn’t want to put it on here really
Peter said:
Whats the clearfix for?
Is there a way of having the whole code (html)?
Thanks in advance