100% div height only fills window not scroll

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ukfusion
    New Member
    • Sep 2007
    • 35
    #1

    100% div height only fills window not scroll

    I have a div which i have 100% height applied to.....as i do with my body/html tags.

    The problem is my div only fills 100% of the visible window, it doesnt fill the scoll beneath.

    my layout is similar to a 3 coloum layout where my center column is what has the overflow....i want my 1st and 3rd column to match the height of the 2nd.

    any help appreciated.
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      divs should only expand to their content. If you wish for them to go to the bottom, you will need to set position:relati ve or absolute and then, in css, set 'bottom:0'

        Comment

        • ukfusion
          New Member
          • Sep 2007
          • 35
          #3
          Hi,

          that didnt seem to have any effect...it still only goes to the window height....hopef ully this pic will make it more clear.

          thats the one reason why i like tables....becau se each cell is linked with the height of others.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              There are other ways to do this but here's one:
              [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
              <html>
              <head>
              <title></title>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <style type="text/css">
              *{margin:0}
              html,body{heigh t:100%}
              </style>
              </head>
              <body>

              <div style="height:1 00%;width:33%;f loat:left;backg round-color:red"></div>
              <div style="height:1 00%;width:33%;f loat:right;back ground-color:blue;"></div>
              <div style="height:1 00%;width:33%;m argin:0 auto;background-color:grey"></div>

              </body>
              </html>[/HTML]

                Comment

                • ukfusion
                  New Member
                  • Sep 2007
                  • 35
                  #5
                  sorry i dont know if you understand what i mean......paste this code ito your document and see what i mean......the div with the overflow in fills but the other 2 dont.

                  i need all 3 divs to have the same height.

                  Code:
                  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
*{margin:0}
html,body{height:100%}
</style>
</head>
<body>
 
<div style="height:100%;width:33%;float:left;background-color:red">1111</div>
<div style="height:100%;width:33%;float:right;background-color:blue;">222222</div>
<div style="height:100%;width:33%;margin:0 auto;background-color:grey">
  <p>333333</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</body>
</html>

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      Ah, OK. I'm pretty slammed with work right now so I'm going to refer you to this sample which may explain a lot of things.

                        Comment

                        Previous template Next
                        Working...