100% height in firefox

Forum Moderators: not2easy

Message Too Old, No Replies

100% height in firefox

Works in IE but not firefox?

ColoDedi

10:19 pm on Sep 22, 2008 (gmt 0)

Evening all,
I am creating a site with a 100% page length which is working except for when there is more data on the page that extends over the bottom.

I am using a container div with min-height:100%
The body and html are also set at height: 100%

I have got more div's inside my container called contentbox1 but when i put say 10 of these in with a paragraph each the divs start to come over the container at the bottom.

The container is only as high as the original work space of the browser but the rest of the data keeps spreading down the page over the top of the container.

Does anyone know a way to fix this?

Thanks in advance.
Kind Regards

swa66

11:52 pm on Nov 5, 2008 (gmt 0)

The root element gets the size of the viewport.
height: 100% mean to use the height of the parent if it is set explicitly. Hence you set the height of body and html to be the height of the viewport, the rest is going to be overflow.

The solutions I've used are e.g. to have a position:fixed footer and have some padding on the content to make sure it clears the footer as needed.

Alternatively, if you can allow the scrollbar to go onto the main div, you could use position: absolute and set all 4 edges.

Faux columns could also help a lot (set teh background on e.g. <html>

You'll need to apply workarounds for IE6 in most of these solutions.