SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
Thread: Taking up 100% page height
-
Sep 22, 2007, 18:25 #1
- Join Date
- Feb 2005
- Location
- A box
- Posts
- 516
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Taking up 100% page height
I have developed a template that I like, and everything seems to work in both IE and firefox, except that I can't figure out how to make it stretch to take up the full height. http://75.185.5.253/portfolio/ is the location. {{{{HERE}}}} is the area I can't seem to stretch out, if anyone can figure it out or give me some pointers that would be great.
<(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT
-
Sep 22, 2007, 18:35 #2
- Join Date
- Sep 2005
- Location
- Australia
- Posts
- 114
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The height is relative to the parent element. If you want 100% height, the page has to be 100% too, like so:
Code:body, html { height: 100%; overflow: hidden; }
-
Sep 22, 2007, 20:59 #3
- Join Date
- May 2002
- Location
- Ontario Canada
- Posts
- 57
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Sep 23, 2007, 08:02 #4
- Join Date
- Feb 2005
- Location
- A box
- Posts
- 516
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It's already set to 100% height for both, if you take a look in portfolio.css.
This does basically nothing in FF, and in IE 6 it extends it beyond a single page scroll.I just want to ensure that my footer always gets pushed to the bottom of the page. If I have enough content it looks great, but when I don't have that much content it doesn't extend<(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT
-
Sep 23, 2007, 09:37 #5
- Join Date
- May 2002
- Location
- Ontario Canada
- Posts
- 57
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Change
#outer {
min-height: 100%;
}
to
#outer {
height: 100%;
}
That should do it ^_^
-
Sep 23, 2007, 11:42 #6
- Join Date
- Feb 2005
- Location
- A box
- Posts
- 516
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
In firefox, yes, in IE, it extends it beyond a single page-scroll. Any idea how to fix it in IE?
<(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT
-
Sep 24, 2007, 03:15 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Well as you are using the old method of tables for layout then I guess Ie6 would probably like the old doctype also.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
If you want to move away from tables then the FAQ on 100% height (and the one on putting a footer at the bottom) explains how to do this without using tables. There are also examples in the 3 col sticky thread at the top of the forum.
If you must use tables then the only way I know of doing something like this in IE6 in standards mode is to use the same method that I used for the footer technique and relies on having a fixed height header and footer.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> * { margin:0; padding:0; } html, body {height:100%;} body {font-family:arial, helvetica, sans-serif;} #header { background:green; height:100px; position:relative; z-index:999; text-align:center; border-bottom:1px solid #000; } #outer { border-collapse:collapse; table-layout:fixed; width:100%; height:100%; margin:-101px 0 -61px; padding:0; } #outer td { padding:101px 8px 61px; vertical-align:top; } #outer .left { width:100px; background-color:red; border-right:1px solid #000; } #outer .center { background:#cdc; } #outer .right { width:100px; background:red; border-left:1px solid #000; } #footer { border-top:1px solid #000; background:green; color:#ff; height:60px; text-align:center; } </style> </head> <body> <div id="header">Header</div> <table id="outer"> <tr> <td class="left">Left</td> <td class="center">Centre</td> <td class="right"> Right</td> </tr> </table> <div id="footer">Footer</div> </body> </html>
-
Sep 24, 2007, 06:45 #8
- Join Date
- Feb 2005
- Location
- A box
- Posts
- 516
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I keep having issues with tables, so I guess it's off to the intarwebs to find out how to do it with all CSS then
Shame, took so long just to get it to work almost right in both IE and Firefox.<(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT
-
Sep 24, 2007, 14:36 #9
- Join Date
- Feb 2005
- Location
- A box
- Posts
- 516
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Alright, so check this out:
http://75.185.5.253/portfolio_rework/css.html
Almost got it right, except I can't get the gray background with green border to extend with the rest of the content. Any ideas?
EDIT: I mean to have it extend without needing content, similar to my initial problem.<(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT
-
Sep 24, 2007, 16:17 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You could use a left repeating y image on the body and a right repeating image on #outer to give you your right and left full length borders.
Your also need to control the content from running over the footer (see faq on putting a footer at the bottom).
If you want three actual columns then its probably easier if you follow my instructions which explain all aspects of this:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
-
Sep 24, 2007, 17:07 #11
- Join Date
- Feb 2005
- Location
- A box
- Posts
- 516
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I can't have it repeat y because the image is a repeat x one. I got the content over running the footer fixed, now just to figure out how to make the gray box extend all the way down.
<(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT
-
Sep 25, 2007, 13:28 #12
- Join Date
- Feb 2005
- Location
- A box
- Posts
- 516
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I just removed that background image and I made a different one. I used the background on #outer for the left one, then put a floating bar for the right one. It now looks almost the exact same in all of the following: Firefox 2.0.0.7, IE 5.55, IE6, and IE7. In IE5.0 the PNG transparency hack doesn't work, and in both 5.5 and 5.0 there's a small gap either above or below the right border, but overall I'm very happy. Thanks for all your help guys, not only is it much cleaner but it has a smaller size thanks to your guidance. I appreciate all the help. Now to figure out how to test it on a Mac without actually using a Mac...
<(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT
Bookmarks