Firefox 100% Height Bug Fix
3 Responses
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…
Read the full article »