PDA

View Full Version : div height issue/problem

thesite
07-21-2005, 04:49 PM
I understand you have to put a height and width values for a div in order to allow the div to scroll...but i am running into problems with this...

my site consists of 3 divs, a header, a menu underneath it, and then the main div containing all the main "stuff"...the top 2 divs have a fixed height as they contain flash files...but i need the main div, to just fill up the rest of the available space in the broswer, so regardless of screen resolution or browser size the top 2 divs will remain the same, with the main div filling up the rest of the space, and scrolling if required...hope this all makes sense

Thanks guys

ps ive tried "height: auto;"
pb&j
07-21-2005, 05:02 PM
because people will be viewing the page at different resolutions, the height of your remaining area will always vary, thus it may be impossible to have both a scroll and a fill-up type idea at the same time. nothing that i know of, sorry.
Merike
07-21-2005, 05:54 PM
Here's what I've come up with, however only firefox displays it right so I tend to think aswell that you can't have such thing working correctly in all browsers unless you want to use frames..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0;">
<div style="position:absolute; border:1px solid #000; height:100px; width:500px;">First</div>
<div style="position:absolute; border:1px solid #000; top:100px; height:100px; width:500px;">Second</div>
<div style="position:absolute; border:1px solid #000; height:auto; bottom:0; top:200px; width:500px; overflow:auto;">
Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
</div>
</body>
</html>
thesite
07-21-2005, 11:08 PM
neither of those seemed to work...and i dnt really wanna use frames, but an iframe wood prob do the job...thanks anyway tho guys...and if anyone else has any suggestions...
COBOLdinosaur
07-22-2005, 01:49 AM
The only way you can do it directly in the page is to script it. An iframe would still need scripting unles you use a fixed height for it.

If you want to try it with scripting, I think I have most of what you need in this widget:

http://cd-articles.fateback.com/widgets/dynamic_hgt_div.htm
thesite
07-22-2005, 12:52 PM
Thanks COBOLdinosaur, that has seemed to work, the main text area resizes itself now...but it doesnt stretch to the bottom of the page, everything is vertically centered and id rather have it going from the very top to the very bottom, cheers
COBOLdinosaur
07-22-2005, 04:02 PM
The code is set up to go to the bottom of the page. What browser are you using to look at it? If you post a link to the page where you are using it I will see it I can determine why it is not going to the bottom of the page.
thesite
07-22-2005, 04:44 PM
the link is http://www.thesite.scsuk.net/ablighting/home.php, and i am looking at it in internet explorer
COBOLdinosaur
07-22-2005, 06:48 PM
The problem is the flash apparently. If you disabel activex the size is perfect because the flash object does not get load. It is doing something to mess up the DOM values. From what I can see in Firefox it looks like the top and bottom margins or the top and bottom padding of the body is messed up. The best I can offer is that you change the value here
sHGT=sHGT-(document.getElementById('main').offsetTop+25);

To something greater than 25 to overcome the whatever is being done by flash. You will have to experiment to find the right value and it is probably going to have both cross-resolution and cross-browser issues.

You are not useing a doctype, and a strict doctype might get rid of the extra margins it is worth a try before you start trying to find the right values for the offset.

Give 4.01 strict a try

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
thesite
07-22-2005, 11:59 PM
that seemed to do the trick, ive noticed tho that there is a margin of 5px or so that i cant seem to account for/get rid of...any suggestions?
COBOLdinosaur
07-23-2005, 02:03 AM
I don't see anything that would directl acount for the margin. The suspect is the calculations in here: function clearbrowseredge(obj, whichedge)