CSS Height: Fill available space. No fixed heights

So i have the following structure I am only using the ids for illustration purposes so this is not even necessarily for a full page.I want my container to specify a fixed size… or a relative size, does not matter. Lets for argument sake say 300px height. Also overflow: hiddenI want head/foot to expand to fit the content …

via Css Website development » Search Results » ajax:

CSS Height: Fill available space. No fixed heights

So i have the following structure

I am only using the ids for illustration purposes so this is not even necessarily for a full page.
I want my container to specify a fixed size… or a relative size, does not matter. Lets for argument sake say 300px height. Also overflow: hidden
I want head/foot to expand to fit the content within itself, so height: auto is sufficient.
I want the body to expand to fit the remaining space in between head and foot. If the content is too big, then scroll (overflow: auto).
height: 100% on #body does not work because then it gains the height of 300px like the parent and pushes part of itself and the footer out of the parent.
Having head and foot position: absolute does not work because by taking them out of the document flow, some content of #body is hidden. To fix that we can use padding-top/bottom but we can’t set a padding-top: xxpx/padding-bottom: xxpx on the #body because we don’t know the necessary height of the head/foot hence why they are height: auto.
Edit:
I tried converting the container/head/body/foot into a table where the #body is height: 100%. This works great except that #body won’t scroll if the content gets too big, instead the entire table expands to show all content. This is not the desired behavior as I need #body to scroll, not #content or it’s parent.
Any suggestions?
…………………………………..

The only solution that immediately comes to mind is display:table-cell, though you run into the problem of lack of support in ie6 & ie7. Perhaps providing the rule for good browsers, and some javascript to calculate differences in height for ie?
Edit:
Here’s another approach – using jQuery to calculate the offset. Bear in mind this is just a quick & dirty attempt – it would need to be browser tested and you’d want some simple error handling etc., but it could be a starting point.
Not sure if javascript is the way you want to go but I can’t see it being done in pure css.
I changed the ids to classes so that you can have multiple ‘fixedHeight’ boxes:


Header Content

Body Content

Body Content

Body Content

Body Content

Body Content

Body Content

Footer Content



…………………………………..

Ok so heres a bit of research I got through to sort-of get this working.
#head
background-color: red;
width: 100%;
position: absolute;
top: 0;
left: 0;

#body
background-color: blue;
color: white;
border: 0 none;
overflow: auto;
height: 100%;
padding-top: 2.5em;
padding-bottom: 2.5em;
box-sizing: border-box;
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

#foot
background-color: green;
width: 100%;
position: absolute;
bottom: 0;
left: 0;

#container
background-color: #aaa;
border: 10px solid orange;
height: 300px;
width: 30%;
overflow: show;
position: absolute;
This assumes I can calculate the sizes of #head and #foot and set the total size to the padding of the appropriate location of #body. This will push the content of body out of the area which #head/#foot occupy due to their absolute positioning. The problem here is that the scroll bar winds up being cut off partially on the top/bottom because only the content is shifted, the scroll bar is not.
For width, this is not really an issue.

For more info: CSS Height: Fill available space. No fixed heights

Css Website development » Search Results » ajax

CSS Height: Fill available space. No fixed heights

Share this post:

Related Posts

Leave a Comment