SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Firefox 100% div
-
Jul 25, 2006, 10:18 #1
- Join Date
- Jul 2006
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Firefox 100% div
I'm having trouble making a certain div in Firefox span 100% of the page. I've tried several tutorials online, and as of now, the css code seems like it should do the trick. But Firefox unfortunately only extends the div as far as a the content fills up.
The website I'm working on is www.umedplans.com/index2.php.
My css is www.umedplans.com/css/test.css for Firefox and www.umedplans.com/css/iehacks.css for IE.
Oddly enough, IE IS displaying the page properly, and the code is similar if not the same.
If you go to the index2.php and notice that the light gray background doesn't span all the way to the bottom in FF, but it does in IE. It is similar on several other pages. The bg color comes from id="frameinside" but the span of it is only changed by id="center".
Does anyone have any suggestions on how to make that light gray bg span the whole inside?
-
Jul 25, 2006, 15:14 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
HI,
In mozilla You cannot inherit height from a min-height div because it collapses to height:auto. If you could inherit it it would save an awful lot of problems but you just can't do it.
Even if you could do it this code would be nonsense.
Code:#frameinside { background-color: #e6e6e6; height: 100%; width: 553px; min-height: 100%; margin-right: auto; margin-left: auto; padding-top: 100px; padding-bottom: 10px; }
So you want an element to be 100% high + 100px padding. Even if it worked that element would never fit in any container because 100% is as big as you can getThen the third problem is what happen when you get more content. Moxilla will fix the element to an initial 100% and content will just overflow. Are you starting to see the difficulty
You can force mozilla to increase 100% height by using display:table but this won't work in ie7 so you have a consistent problem.
The easiest solution is simply to add the light grey background colour to the middle of this image and the problem is solved without extra mark-up.
http://www.umedplans.com/images/contentbgWeb.png
You really only have one shot at 100% height and you have to be creative to complete the illusion. See the faq on 100% height for more info.
-
Jul 26, 2006, 08:25 #3
- Join Date
- Jul 2006
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
Bookmarks