SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to make sure div spans whole height?

    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.

  2. #2
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well have you tried using the transparent GIF "trick"?

    <img src="spacer.gif" width="1" height="100%" alt="" />

    Renegade's Paradox

  3. #3
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well that gif usually works for me but oh well,I guess I suck
    Renegade's Paradox

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 11:37.

  7. #7
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see... something like this?

    ...
    var h = document.body.offsetHeight;
    var h2 = div2.offsetHeight;
    div1.style.height = (h2 > h) ? h2 : h;
    ...

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wait you got it!! you the man jofa!!

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  10. #10
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm how would i go about adding 20px to the h2 variable?

  13. #13
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by dttt
    hmm how would i go about adding 20px to the h2 variable?
    h2 += 20;

    or set
    var h2 = div2.offsetHeight + div2.offsetTop;

  15. #15
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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;
    ------------

  16. #16
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like S7even wrote; "call the setHeight function onresize also"

  17. #17
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahhh smooth on the belly, thanks jofa and s7even again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •