471,610 Members | 1,369 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,610 software developers and data experts.

forcing div to take all available height between two divs

I have absolutely positioned, fixed size div (mainDiv) on a page, inside which a header(headerDiv) , a div containing data (dataDiv) and a footer(footerDiv) should be displayed. Scrollbars should be shown if there is too much data to fit inside containing div.

The problem is that headerDiv has variable height, so dataDiv can't have fixed height defined, but should take all available height that remains in mainDiv

Expand|Select|Wrap|Line Numbers
  1. <style>
  2.  
  3. #mainDiv{
  4. position:absolute;
  5. left:100px;
  6. top:100px;
  7. width:500px;
  8. height:500px;
  9. }
  10.  
  11. #headerDiv{
  12. width:100%;
  13. }
  14.  
  15. #dataDiv{
  16. width:100%;
  17. overflow:auto;
  18. height:???
  19. }
  20.  
  21. #footerDiv{
  22. width:100%;
  23. height:20px;
  24. }
  25.  
  26. </style>
  27.  
  28. <div id="mainDiv">
  29. <div id="headerDiv">
  30. Header with height based on content
  31. </div>
  32. <div id="dataDiv">
  33. Variable data, scrollable if container height is exceeded
  34. </div>
  35. <div id="footerDiv">
  36. Fixed size footer
  37. </div>
  38. </div>
I have been experimenting with different css properties and checked numerous forums but could not find appropriate solution. Does anyone knows a css solution to this seemingly simple problem or is Javascript the only option?

thanx

Simon
Aug 23 '07 #1
1 5205
epots9
1,351 Expert 1GB
Hi JesenkoS welcome to TSDN,

try this:
Expand|Select|Wrap|Line Numbers
  1. #headerDiv{
  2. width:100%;
  3. height:20%
  4. }
  5.  
  6. #dataDiv{
  7. width:100%;
  8. overflow:auto;
  9. height:60%
  10. }
  11.  
  12. #footerDiv{
  13. width:100%;
  14. height:20%;
  15. }
  16.  
play around with the percentages to get it looking the way u want.
good luck
Aug 23 '07 #2

Post your reply

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

Similar topics

5 posts views Thread by Duane Lambe | last post: by
6 posts views Thread by Finn Newick | last post: by
3 posts views Thread by Rennie deGraaf | last post: by
1 post views Thread by avocado12 | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.