11 replies to this topic

[Devilman]

I thought that it wasn't working but realised that was because it works in internet explorer is there a way to make it work in firefox? Firefox only extends the div as long as the content inside it.

[coolaid]

lets see an example, you said ie does it, so i'm guessing you used floats without clears. but in reality css doesn't support 100% height

[Devilman]

It's exactly how I want my site to look which is the annoying thing without the sidenavs stretching down 100% it makes the site go out of proportion.

[Devilman]

http://www.whos-blazin.org/test.php there is the link to the page as you can see it works ok in internet explorer but the heights don't work in firefox. I know the coding is a bit sloppy but it's a first attempt using CSS and I am working on fixing any sloppyness.

[Devilman]

Or if anyone can think of any other way to fix it please help? I don't want to make the site a certain height because I'm going to use includes so the content will sometimes be long.

[Davey]

Devilman, on Oct 3 2006, 12:11 AM, said:

Or if anyone can think of any other way to fix it please help? I don't want to make the site a certain height because I'm going to use includes so the content will sometimes be long.

i too have had this issue... i dont believe there is a way u can have it to work in FF as yet - i ended up just using height:auto; and letting the layout size itself to the content... it bugged me but i found no immediate fixes after trying on numerous web design forums

[Devilman]

It really is quite annoying I thought maybe it's because height 100% wasn't valid CSS coding but I went and validated my CSS and it came out error free.

[greg]

There's no way around it without using Javascript.

Either use a background image to give the appearance of a fully-stretched box, or just let the content do the stretching.

[Devilman]

Thats what I done put the main content and sidenav in a container with a background image. Therefore the sidenav will appear to stretch to the length of the main content and visa-versa.

[Adαm]

Add this to the css, it will hopefuly fix it:

html {
height: 100%;
}
body {
height: 100%;
}

[NGPixel]

As Devilman, CSS does not support 100% height. The problem is not CSS but they way your page was coded. You need to use a container div (look P2L source code if you need an example).

[Devilman]

Thats what I done in the end used a container with a background image therefore the main content divs stretch to the height of the container which is going to be the the same length as the highest div.