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.

you want to set the body's background to fit between head and footer?
–
galambalazsJun 30 '10 at 21:46

1

You can probably "fake" the appearance of whatever it is you're trying to accomplish by thinking of #container as #body's back. You could also throw in an extra parent element if #container can't be trifled with. Depends on what you're after, exactly.
–
reisioJun 30 '10 at 22:41

@reisio: can't. The problem is that I want the foot at the bottom, and the head at the top, and the body to fill the space. I don't mind using #container as the background of #body, but the problem is making head/foot position and body scroll. Its more about the content than the background color.
–
Dmitriy LikhtenJul 2 '10 at 14:39

If I were you, I would question why I need my container to be exactly 300px tall. ;)
–
Evan KroskeJul 2 '10 at 20:37

2 Answers
2

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:

ie7 support is needed. What dos display: table-cell imply? Does table-cell take up as much space as possible from it's parent?
–
Dmitriy LikhtenJul 1 '10 at 0:31

1

This solution does not work. In order to get it to display correctly I need to have a parent div with display: table however a table does not seem to respect the height property. So if I set the table's height to 300px it will expand as long as necessary. Even with max-height it does not respect it. I tried making head/foot as display: table-row and body as display: table-cell and container as display: table and it works perfectly, until I need body to scroll at which point it just starts growing.
–
Dmitriy LikhtenJul 1 '10 at 17:57

1

Of course - height on a table always implies min-height! Perhaps if you provided some additional context & content for what you're trying to do? I'm not sure that this precise arrangement can be done in purely in css, but perhaps an alternative approach would solve the problem?
–
DHuntrodsJul 1 '10 at 19:26

I am trying to create a technique so that I can create a few CSS classes to allow for things like having lets say a table "component" on my page which displays paginated tabular data with a header, a footer (one of the two will have navigation) and body. The "component" goes somewhere into the page which either contains a size, or a "fit" size, or an "expand" size. Long story short, a little bit of layout standardization so that I can lay everything out easier. And no, the table component I mentioned is not the only use case.
–
Dmitriy LikhtenJul 1 '10 at 20:40

Since no other solutions were proposed, I probably have to do this approach. I would still like to know why if there is a css way to do this without multiple tables.
–
Dmitriy LikhtenAug 31 '10 at 19:48

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.