Сложная высота в CSS

Question

Прежде чем я объясню, что я пытаюсь сделать, обратите внимание, что мне повезло, что мне нужно только нацеливаться на Webkit (то есть я могу использовать много аккуратного CSS).

Итак, в основном я хочу иметь блок с гибкой высотой, фиксированной позицией, максимальной высотой, равной доступной высоте окна, с некоторыми элементами в верхней и нижней частях блока, которые всегда видны, и в Посередине области с переполнением авто. В основном это будет выглядеть так:

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

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

Можно ли это сделать с помощью CSS? Или мне придется взломать его с помощью Javascript? Я был бы готов принять небольшое разделение, если это то, что нужно, чтобы сделать эту работу - лучше разделить, чем пытаться учесть каждую глупую мелочь, такую ​​как перекомпоновка и изменение размера окна и вся эта ерунда.

Я готов к плохим новостям, что CSS не может этого сделать, но я был приятно удивлен магией, которую некоторые люди на SO могли сработать раньше.

Answer 1

Хорошо, я понял это, используя немного Javascript, но ни одной из сложностей, которые были бы необходимы, если бы это был кросс-браузер. Я выложу ответ, если кому-то все равно.

Markup:

<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

Это похоже на ваш билет