Question

The following code has a DIV that needs to be positioned at the top of the container, another at the bottom and then the content needs to come through in the middle.

<div style="position:absolute; top:0; width:100%; height:40px"></div>

<div class="howto"></div>

<div style="position:absolute; bottom:0; width:100%; height:40px"></div>

So we don’t know the height of the containing DIV. How without JS can the div with class howto have the height of the container DIV less the height of the absolute positioned div at the top and bottom so as to contain content between these 2 DIVs.

Answer 1

For what you wish to accomplish, this is one possible solution:

@tinkerbin: http://tinkerbin.com/QsaCPgR6

HTML:

<div class="container">
    <div class="header"></div>

    <div class="howto">
      Has height set to auto. You may change that if you want to.
    </div>

    <div class="footer"></div>
</div>

CSS:

.container {
  position: relative;
  padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}

.header,
.footer {
  position: absolute;
  height: 40px;
  width: 100%;
}

.header {
  top: 0;
}

.footer {
  bottom: 0;
}

.howto {
  height: /*specifiy one if you wish to*/;
}