How do I make a div the full height of the page content? 2

[BabyJeffy]

I have a simple page layout of one column (that contains dynamic content that varies from page to page) and an absolutely positioned div that sits at the top of the page and to the right of the single content column.

I am using scriptaculous to make the absolutely positioned div draggable (allowing the user to drag the div "in" from the side of the page, and then "out" again when they are done).

Oh, I'm using a 4.01 Transitional doctype (although I can alter this at this early stage if needed). I'm looking for compatibility with the following browsers: IE6+7 (Win), FF2 (Mac/Win).

Without using Javascript, can anyone suggest a way to make the absolute positioned div the height "of the content of the page". This is not as simple as setting the div to height 100% (since that gives 100% of the height of the browser - not the content).

Personally I can't come up with a solution. I think I'll resort to using javascript.

Any suggestions?

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[ca8msm]

I think I'll resort to using javascript.

I think you'll have to. As the content page's height can by dynamic, you're not going to know what this height will be until the page loads.

Only other thing I can think of is can they be placed in a container and both set to 100% of that? With the other div being absolutely positioned though, this may not work...


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[BabyJeffy]

Mark,

I was going down that route initially (playing with using 100% in different markup scenarios), but haven't really found anything useful.

Given we're using javascript on every page (scriptaculous and prototype are available), it's no big deal to use Javascript... but I was keen to see if anyone else had any suggestions.

Thanks for having a think for me

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[ca8msm]

Only other thing I can think of is can they be placed in a container and both set to 100% of that? With the other div being absolutely positioned though, this may not work...

Just an update to re-iterate that this doesn't work. As the div is absoltely positioned, it takes it out of the normal document flow and as such isn't really part of it's containing div. When you set it to 100%, it does exactly what Jeff doesn't want and sets it to 100% of the browser.

I'd be interested to see a css solution, but I think you'll be stuck with js for this one.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[BabyJeffy]

For completeness, I found this link really useful in getting the proper height of the content (for my JS solution):

http://www.quirksmode.org/viewport/compatibility.html

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094