468,316 Members | 2,068 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

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.
Mar 6 '08 #1
5 14737
drhowarddrfine
7,435 Expert 4TB
divs should only expand to their content. If you wish for them to go to the bottom, you will need to set position:relative or absolute and then, in css, set 'bottom:0'
Mar 6 '08 #2
Hi,

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

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

Mar 6 '08 #3
drhowarddrfine
7,435 Expert 4TB
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{height:100%}
</style>
</head>
<body>

<div style="height:100%;width:33%;float:left;background-color:red"></div>
<div style="height:100%;width:33%;float:right;backgroun d-color:blue;"></div>
<div style="height:100%;width:33%;margin:0 auto;background-color:grey"></div>

</body>
</html>[/HTML]
Mar 6 '08 #4
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.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <style type="text/css">
  8. *{margin:0}
  9. html,body{height:100%}
  10. </style>
  11. </head>
  12. <body>
  13.  
  14. <div style="height:100%;width:33%;float:left;background-color:red">1111</div>
  15. <div style="height:100%;width:33%;float:right;background-color:blue;">222222</div>
  16. <div style="height:100%;width:33%;margin:0 auto;background-color:grey">
  17.   <p>333333</p>
  18.   <p>&nbsp;</p>
  19.   <p>&nbsp;</p>
  20.   <p>&nbsp;</p>
  21.   <p>&nbsp;</p>
  22.   <p>&nbsp;</p>
  23.   <p>&nbsp;</p>
  24.   <p>&nbsp;</p>
  25.   <p>&nbsp;</p>
  26.   <p>&nbsp;</p>
  27.   <p>&nbsp;</p>
  28.   <p>&nbsp;</p>
  29.   <p>&nbsp;</p>
  30.   <p>&nbsp;</p>
  31.   <p>&nbsp;</p>
  32.   <p>&nbsp;</p>
  33.   <p>&nbsp;</p>
  34.   <p>&nbsp;</p>
  35.   <p>&nbsp;</p>
  36.   <p>&nbsp;</p>
  37.   <p>&nbsp;</p>
  38.   <p>&nbsp;</p>
  39.   <p>&nbsp;</p>
  40.   <p>&nbsp;</p>
  41.   <p>&nbsp;</p>
  42.   <p>&nbsp;</p>
  43.   <p>&nbsp;</p>
  44.   <p>&nbsp;</p>
  45.   <p>&nbsp;</p>
  46.   <p>&nbsp;</p>
  47.   <p>&nbsp;</p>
  48.   <p>&nbsp;</p>
  49.   <p>&nbsp;</p>
  50.   <p>&nbsp;</p>
  51.   <p>&nbsp;</p>
  52.   <p>&nbsp;</p>
  53.   <p>&nbsp;</p>
  54.   <p>&nbsp;</p>
  55.   <p>&nbsp;</p>
  56.   <p>&nbsp;</p>
  57.   <p>&nbsp;</p>
  58.   <p>&nbsp;</p>
  59. </div>
  60. </body>
  61. </html>
Mar 6 '08 #5
drhowarddrfine
7,435 Expert 4TB
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.
Mar 6 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Charles | last post: by
1 post views Thread by joshthomas99 | last post: by
reply views Thread by JimmyHoffa | last post: by
6 posts views Thread by msoliver | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.