ansaurus

Question

Answer 1

A:

If I remember correctly, in order be able to specify positions of a container's (A) child containers (B1, B2, ...), it's position should be absolute. Your body container's position isn't.

I guess you should add the position:absolute; property to the html,body selector.

xtofl 2010-02-01 14:07:31

Tried, still no success

woody993 2010-02-01 14:08:55

Answer 2

A:

Look into min-height

ghoppe 2010-02-01 14:16:23

For which element/selector?

woody993 2010-02-01 14:19:19

For your #gradient and #holes, set min-height: 100%

ghoppe 2010-02-01 14:24:24

No luck there with min-height

woody993 2010-02-01 14:31:51

Why have you set both left: and right: properties to contradictory values?

ghoppe 2010-02-01 14:39:22

try using a #wrapper div to contain #gradient #holes #header and set #wrapper {min-height: 100%}

ghoppe 2010-02-01 14:45:02

How contradictory, it tapes the left margin to 0px and right margin to the 0px, equal to 100% width

woody993 2010-02-01 14:46:16

No change with #wrapper

woody993 2010-02-01 14:48:38

Any reason why you don't want to add the background-image:url(../Images/Tile.png); to the html element instead of the body element?

ghoppe 2010-02-01 14:55:39

Answer 3

A:

The best way is to use javascript. min-height is not supported by every browser.

Javascript using prototype:

<script type="text/javascript">
var height = $(document.body).getHeight();
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>');
</script>

2010-02-01 14:22:08

I'm not sure writing the div into the page directly is the best idea: why not use $('#divName).css('height', height) instead [or the prototype equivalent]?

Ed Woodcock 2010-02-01 14:26:22

No need to use javascript. If you must have compatibility with IE6 (blech!) since IE < 6 treats height incorrectly as min-height, it's better to use the star html hack:* html #gradient {height:100%;}

ghoppe 2010-02-01 14:33:16

Least amount of visitors will be using windows, if any.

woody993 2010-02-01 14:35:04

Answer 4

A:

Gaby 2010-02-01 14:32:30

I have now, still nothing

woody993 2010-02-01 14:33:25

yes .. i posted without checking .. it will only work for the overflowing element .. (the one whose content will go beyond the bottom of the viewport..)

Gaby 2010-02-01 14:40:07

posted a different approach .. have a look..

Gaby 2010-02-01 14:48:59

Answer 5

A:

I think you did it right. This is working in Chrome (WebKit too!) and in IE7/8/Quirks whenever you put width: 100% on #gradient and #holes, can't test safari on Mac right now (only have it at home) but in theory you should be seeing it properly.

That said, maybe this is a doctype thing, try different ones?

F.Aquino 2010-02-01 14:39:57

Tried XHTML 1.1, 1.0 Transitional, 4.01 Transitional

woody993 2010-02-01 14:46:55

Answer 6

A:

To be honest, I think I'm just going to overflow:auto on my content so that the entire page does not need to be scrolled

woody993 2010-02-01 14:55:21

Answer 7

A:

Well it looks to me that your element with all the content is floated. If it is then its not going to expand the body unless it is cleared.

prodigitalson 2010-02-01 14:57:18

I think he might have it, totally missed that as the css for the content box wasn't posted!

ghoppe 2010-02-01 15:34:51

Answer 8

A:

Have you tried setting up like this?

#holes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Will stretch the element to fill the whole page area

Pete B 2010-02-01 15:49:04

ansaurus

tags:

views:

answers:

Absolute DIV height 100%

related questions