473,225 Members | 1,513 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 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 5620
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

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

Similar topics

5
by: Duane Lambe | last post by:
On some suggestions from this group, I've started to turn my internal helpdesky site for our company to non-absolute positioning. I've been reading O'Reilly's CSS book, and several web sites and...
6
by: Finn Newick | last post by:
By defining a style as follows: @media aural, handheld {td.layout {display:block;}} I'm hoping to linearise layout tables when viewed by screenreaders and handheld devices (it is also be in...
3
by: Rennie deGraaf | last post by:
Is it possible to force adjacent block elements to have the same height, without specifying that height? In this page (http://pages.cpsc.ucalgary.ca/~degraaf/test/index3.html), I have a bunch of...
6
by: veerleverbr | last post by:
Hi, I have the following html: <div id="content"> <div id="leftpart">...</div> <div id="rightpart">...</div> </div> leftpart en rightpart are in the css set to float left. The content of...
5
by: shanti.miller | last post by:
I've got a grid that uses paging and displays a maximum of 10 records at a time. Sometimes the fields have a lot of data in them and the datagrid takes up way too much horizontal space. I've...
4
by: atma86 | last post by:
what up people, i'm writing an app which includes a page that has 2 divs side by side. the page is set up to fill the table containing the divs to 100% of the width of the pages. I want the height...
1
by: avocado12 | last post by:
Hi, I'm pretty new to web development and I just spent the better part of the morning trying to figure out this IE bug. I came up with a hack that makes no sense to me. I would appreciate if...
2
by: damezumari | last post by:
I have three div blocks defined like this: #left1 { float: left; background-color: white; width: 184px; margin-right: 4px; text-align: left; }
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...

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.