CSS complex height

Question

Before I explain what I'm trying to do, note that I am lucky that I only need to target Webkit (which means that I can use a lot of neat CSS).

So, basically, I want to have a block with a flexible height, a fixed position, a maximum height equal to the height of the available window, with some elements in the upper and lower parts of the block that are always visible, and in the middle area with automatic overflow. Basically it will look like this:

----------------------
| Top item | |
| | |
| stuff | |
| | |
| | |
| Last item | |
| ------------ |
| |
| |
----------------------

----------------------
| Top item | |
| ----------- | |
| lots | ^ | |
| of | _ | |
| stuff | _ | |
| | | |
| | | |
| ----------- | |
| Last item | |
----------------------

CSS? Javascript? div-itis, , div-itis, , ​​ , .

, , CSS, , SO .

Answer 1

, , Javascript, , , -. , - .

:

<div class="complex-height">
    <div class="top"><!-- stuff --></div>
    <div class="middle"><!-- stuff --></div>
    <div class="bottom"><!-- stuff --></div>
</div>

CSS

.complex-height {
    position: fixed;
    top: 0;
    left: 0;
    max-height: 100%;
    width: 300px; /* Can be whatever, but must specify a width */
    overflow: auto;
}
.complex-height .top, .complex-height .bottom {
    width: 100%;
    position: absolute;
    z-index: 2; /* make sure they overlap the center */
}
.complex-height .top {
    top: 0;
}
.complex-height .bottom {
    bottom: 0;
}

Javascript ( Prototype, ):

$$('.complex-height .middle').each(function(middle) {
    middle.setStyle({
        paddingTop: middle.up('.complex-height').down('.top').getHeight() + 'px',
        paddingBottom: middle.up('.complex-height').down('.bottom').getHeight() + 'px'
    });
});
$$('.complex-height').invoke('observe', 'scroll', function(e) {
    this.down('.top').setStyle({
        top: this.scrollTop + 'px'
    });
    this.down('.bottom').setStyle({
        bottom: (0 - this.scrollTop) + 'px'
    });
});

Answer 2

It looks like your ticket