scable div height 100% javascript?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • htmlnoob112233
    New Member
    • Jun 2009
    • 20

    scable div height 100% javascript?

    I have a div which I have set to the height of 100% so it reaches the bottom of the page no matter the size of the browser resolution.

    However, when the browser is resized the div no longer reaches the bottom of the page.

    How do I set a div's height to 100% and keep it at this even if the browser window is resized?


    Thanks.
  • htmlnoob112233
    New Member
    • Jun 2009
    • 20

    #2
    I have relised that curently, the div only reaches the bottom of the visible page in the browser, if the browser where to scroll down, the div would not continue.

    So I need the script to make the div reach the bottom of the page instead of just the bottom of the browser window's orginal location on the page.

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      You can probably do this with CSS alone without JavaScript. Give the parent container (body) 100% height.

      Comment

      • htmlnoob112233
        New Member
        • Jun 2009
        • 20

        #4
        Dosn't work. When I scroll down the div does not continue.

        Comment

        • iam_clint
          Recognized Expert Top Contributor
          • Jul 2006
          • 1207

          #5
          see -> http://matthewjamestaylor.com/blog/u...ail-pixels.htm

          The holy grail of css is what you are speaking of

          Comment

          • htmlnoob112233
            New Member
            • Jun 2009
            • 20

            #6
            Is this right because it's not working?

            style.css
            Code:
            /* commented backslash hack \*/ 
            html, body{height:100%;} 
            /* end hack */
            html,body {margin:0;padding:0}
            #dname{
            min-height:100%;
            height:auto;
            * html #dname{height:100%;}
            
            body	{
            background-image: url(img.jpg);
            background-position: left top;
            background-repeat: no-repeat;
            background-color:#ffffff;
            }
            
            div.dname	{
            background-image:url(dimg.jpg);
            background-position: left top;
            background-repeat: repeat;
            }

            Comment

            Working...