| SitePoint Sponsor |
hey guys i was wondering how to make a div span the whole height of the page (even if the page is longer, causing scrollbars)?
i put height:100% in my stylesheet but it doesnt seem to do it.. it just spans the height of the browser, and when the page is longer it stops at the height of the browser and not span all the way down..
any suggestions? thx.
Well have you tried using the transparent GIF "trick"?
<img src="spacer.gif" width="1" height="100%" alt="" />
Renegade's Paradox
What's the difference? An image with height:100% will have the same height as a div - the height of the browser window
Take a look at this instead:
http://msdn.microsoft.com/workshop/a...fsetheight.asp
Well that gif usually works for me but oh well,I guess I suck
Renegade's Paradox
Well, 100% works if you want the height of the browser window, not the height of the page
Code:<html> <head> <style> #div1 { background-color: #ff0000; position: absolute; left: 0px; top: 0px; width: 300px; } #div2 { background-color: #00ff00; position: absolute; left: 300px; top: 0px; width: 300px; } </style> <script language="javascript"> function setHeight() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.style.height = div2.offsetHeight; } </script> </head> <body onload="setHeight()"> <div id="div1"> A shorter text. </div> <div id="div2"> A long text causing scrollbars. A long text ... causing scrollbars. </div> </body> </html>
heeh great script jofa you have come to the rescue again man! but i have one more small request..is it possible to have the left div already fill the height of the screen? and when and only when the right div has enough text and will have to use scrollbars the left div expands with the right div?
*edit to make it clearer, i would like that height:100%; if it could be incorporated somehow..since i always want my left div spanning the height of the browser..
Last edited by dttt; Dec 29, 2002 at 12:37.
Ah, I see... something like this?
...
var h = document.body.offsetHeight;
var h2 = div2.offsetHeight;
div1.style.height = (h2 > h) ? h2 : h;
...
wait you got it!! you the man jofa!!
dang jofa you might be mad at me but i also have one more request... it seems that i have my right div start 20px from the top of the browser... so it seems that the left div doesnt compensate for the 20px and there is a 20 px space from the bottom of the left div to the bottom of the browser (when theres more info in right div then the height of the browser) can you compensate for this?
I had the same problem some time ago:
http://www.sitepointforums.com/showt...threadid=86761 but jofa didn't help me and i had to waste hours looking for the solution
All you need to do is to add 20 to the h2 variable.
You can do it more dynamic by adding the offsetTop of the right div instead, but this will only complicate things
Also, if the right div doesn't have a fixed width you might want to call the setHeight function onresize also. This is because if the user resizes the window, the content of the right div will be refloated and it's height will increase. Calling the setHeight onresize, will make sure that the left div is always as long as the right one.
hmm how would i go about adding 20px to the h2 variable?
Correction; to get the height of the browser window, use document.body.clientHeight, not offsetHeight
Good reference: http://www.xs4all.nl/~ppk/js/doctypes.html
S7even; sorry I missed your question earlier
h2 += 20;Originally posted by dttt
hmm how would i go about adding 20px to the h2 variable?
or set
var h2 = div2.offsetHeight + div2.offsetTop;
heh thats nice s7even and jofa, but weird thing is if i make my browser window smaller and load up the page... then resize the browser window higher...the left div doesnt seem to update with the browser..what might be wrong or is there nothing you can do about it
-----------
var div1 = document.getElementById("left");
var div2 = document.getElementById("right");
div1.style.height = div2.offsetHeight;
var h = document.body.offsetHeight;
var h2 = div2.offsetHeight + div2.offsetTop;
div1.style.height = (h2 > h) ? h2 : h;
------------
Like S7even wrote; "call the setHeight function onresize also"
ahhh smooth on the belly, thanks jofa and s7even again
Posting Permissions
Bookmarks