CSS中的复杂高度

这看起来像你的 ticket

好吧,我想出来了,我使用了一点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(假定是原型,但是直接编写或编写到另一个lib中很简单):

$$('.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'
    });
});