SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: DIV Height = 100%
-
Nov 21, 2003, 02:36 #1
- Join Date
- Jun 2001
- Location
- London
- Posts
- 48
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
DIV Height = 100%
Iv made a DIV with height 100%, but it only extends to 100% of the actual browser size. But if the content is more than a page, it cuts off. How can I make it the height of the PAGE?
Thanks in advance...www.steigerdesign.com
Bless your FRGL. LTTL. MNDS.
-
Nov 21, 2003, 04:58 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
I don't think you can reliably set 100% height cross browser. IE6 will take 100% height as window height but will expand to document height if larger.
Mozilla will take html,body {100% height} to be viewport height and content will overflow if larger.
If you just want a background colour to extend with the content then you could use an inner div for mozilla with the same background color. The background will then appear to expand with the document. However it will only work for certain situations in Mozilla as content placed after the divs will be placed at 100% viewport height.
Or you could do the same as above but float a column.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html,body {height:100%;margin:0;padding:0;background:blue} .outer {height:95%;width:300px;background:red;} .outer p{margin:0} .inner {background:red;width:100%;float:left;} .footer {background:green;clear:both;height:5%} </style> </head> <body> <div class="outer"> <div class="inner"> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> </div> </div> <div class="footer">Footer</div> </body> </html>
.
Paul
-
Nov 21, 2003, 07:24 #3
- Join Date
- Mar 2002
- Location
- Lappeenranta, Finland
- Posts
- 176
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well, I just figured this one out.
It can be done!!
http://www.sitepointforums.com/showt...tpost&t=138405
-
Nov 21, 2003, 08:16 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hmmm,
My code seems to do the same as that unless I'm mistaken
Paul
-
Nov 21, 2003, 10:43 #5
- Join Date
- Mar 2002
- Location
- Lappeenranta, Finland
- Posts
- 176
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Noooo, you spoiled my fun.
-
Nov 21, 2003, 10:46 #6
- Join Date
- Mar 2002
- Location
- Lappeenranta, Finland
- Posts
- 176
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
But, ah, your footer is certain percentage of the height. Can you make it fixed height? Also I'd like to see a fixed height footer.
I'd be intereted to see it done, as mine has a fix for browser issues, and thats no fun.
(that was a part of my original problem)
-
Nov 21, 2003, 11:14 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Easy to add a fixed footer just change these two lines in my above code:
Code:.outer {height:100%;width:300px;background:red;margin-bottom:-50px;} .footer {background:green;clear:both;height:50px;}
.
Your code seems to work ok (except in OPera7 as you mentioned).
Paul
Edit:
mine doesn't work in Opera 7 with the fixed height footer
-
Nov 21, 2003, 12:36 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Here's the footer with a fixed height but this is getting pretty ugly now. It works in Mozilla 1.2, IE6 and Opera7 (all PC as i'm sure macs won't like it).
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> html,body {height:100%;margin:0;padding:0;background:blue} .outer {height:100%;width:300px;background:red;margin-bottom:-50px;} .outer p{margin:0} .inner {background:red;width:100%;float:left;} .footer {background:green;clear:both;height:50px;} #clear {display:none} *html #clear {display:block;height:50px;}/*IE needs this only */ html*#operahide {display:none}/*hide from opera */ </style> </head> <body> <div class="outer"> <div class="inner"> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> <p>Hello</p><p>1</p><p>1</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p> <div id="clear"></div> </div> </div> <br id="operahide" style="clear:both" /> <div class="footer">Footer</div> </body> </html>
Paul
-
Nov 21, 2003, 13:29 #9
- Join Date
- Mar 2002
- Location
- Lappeenranta, Finland
- Posts
- 176
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well, in my ie5.0 and opera the height is off a bit, too high.
And you're having more and more hacks.
I'ts intereting to see other solutions.
-
Nov 21, 2003, 14:48 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
And you're having more and more hacks.
It works in Opera7 though (where yours didn't)
The original with percentage was quite neat (no hacks) but the fixed height footer does cause problems.
I'ts intereting to see other solutions.
Paul
Bookmarks