CSS中的复杂高度 [英] Complex height in CSS

问题描述

在我解释我想做的事情之前，请注意，我有幸运的只需要定位Webkit（意思，我可以使用很多整洁的CSS）。

Before I explain what I'm trying to do, note that I have the good fortune of only having to target Webkit (meaning, I can use lots of neat CSS).

所以，基本上，我想要一个具有灵活高度，位置固定，最大高度是可用窗口高度的块，其中一些元素在块的顶部和底部总是可见的，中间有一个溢出自动的区域。基本上它看起来像这样：

So, basically, I want to have a block with a flexible height, position fixed, maximum height being that of the available window height, with some elements at the top and bottom of the block that are always visible, and in the middle an area with overflow auto. Basically it'd look like this:

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

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

可以使用CSS ？或者我将使用Javascript来破解它？我会愿意接受一个小div-itis如果这是需要做的工作 - 更好的div-itis比试图解释每一个愚蠢的小事情，如回流和窗口调整大小和所有的废话。

Can it be done with CSS? Or will I have to hack it with Javascript? I'd be willing to accept a little div-itis if that's what it takes to make this work—better div-itis than trying to account for every stupid little thing like reflow and window resize and all of that nonsense.

我准备好了坏消息，这不是CSS可以做的，但我已经惊喜的魔术一些人可以工作之前。

I'm prepared for the bad news that this isn't something CSS can do, but I've been pleasantly surprised by the magic some folks on SO can work before.

推荐答案

好吧，我想出来了，使用一点Javascript，但是如果这是跨浏览器，就没有必要的复杂性。

Okay, I figured it out, using a bit of Javascript but none of the complexity that would be necessary if this were cross-browser. I'll post the answer in case anyone cares.

标记：

<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 ）：

Javascript (assume Prototype, but is trivial to write straight up or to another 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'
    });
});

这篇关于CSS中的复杂高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！