ansaurus

Question

CSS Height: Fill available space. No fixed heights.

Answer 1

+2 A:

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:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'&gt;&lt;/script&gt;

<script>

$(function() {   
   $(".fixedHeight").each(function() {
    var head = $(this).find(".head");
    var body = $(this).find(".body");
    var foot = $(this).find(".foot");   
    body.css("margin-top", head.height()).css("margin-bottom", foot.height());      
   });   
 });


</script>

<style>

.head {
    background-color: red;
    position: absolute;
    top: 0;
    width:100%;
}
.body {
    background-color: blue;
    color: white;
    overflow: auto;
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    margin:2.5em 0;
}
.foot {
    background-color: green;    
    position: absolute;
    bottom: 0;
    width:100%;
}
.container {
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%;
    position: absolute;
}


</style>

</head>

<body>

<div class="container fixedHeight">
  <div class="head">
    <h1>Header Content</h1>
  </div>
  <div class="body">
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
  </div>
  <div class="foot">
    <p>Footer Content</p>
  </div>
</div>


</body>
</html>

DHuntrods 2010-06-30 21:41:12

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 Likhten 2010-07-01 00:31:13

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 Likhten 2010-07-01 17:57:21

DHuntrods 2010-07-01 19:26:57

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 Likhten 2010-07-01 20:40:29

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 Likhten 2010-08-31 19:48:11

Answer 2

A:

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.

Dmitriy Likhten 2010-07-02 18:14:10

ansaurus

tags:

views:

answers:

CSS Height: Fill available space. No fixed heights.

related questions