By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,867 Members | 1,964 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,867 IT Pros & Developers. It's quick & easy.

100% div height only fills window not scroll

P: 35
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
Share this Question
Share on Google+
5 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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

P: 35
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
Expert 5K+
P: 7,435
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

P: 35
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
Expert 5K+
P: 7,435
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.