DIV Height = 100%

**steiger** · Nov 21, 2003, 01:36

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...

**Paul O'B** · Nov 21, 2003, 03:58

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>

However I think this is of limited use but you may be able to use something

.

Paul

**Arkkimaagi** · Nov 21, 2003, 06:24

Well, I just figured this one out.

It can be done!!

http://www.sitepointforums.com/showt...tpost&t=138405

**Paul O'B** · Nov 21, 2003, 07:16

Hmmm,

My code seems to do the same as that unless I'm mistaken

Paul

**Arkkimaagi** · Nov 21, 2003, 09:43

Noooo, you spoiled my fun.

**Arkkimaagi** · Nov 21, 2003, 09:46

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)

**Paul O'B** · Nov 21, 2003, 10:14

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;}

I haven't really tested it properly but i've tried it in OPera7, IE6 and Mozilla and it seems to work ok but I wouldn't be surprised if it doesn't fall apart somewhere

.

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

**Paul O'B** · Nov 21, 2003, 11:36

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>

Anyway it might be of some use to someone.

Paul

**Arkkimaagi** · Nov 21, 2003, 12:29

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.

**Paul O'B** · Nov 21, 2003, 13:48

And you're having more and more hacks.

Yes I agree

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.

Yes it's good to try things out for yourself, it's the best way to learn what works and what doesn't.

Paul

The SitePoint Forums have moved.

User Tag List

Thread: DIV Height = 100%

Thread Tools

Display

DIV Height = 100%

Bookmarks

Bookmarks

Posting Permissions