html - 容器内可滚动的 div，高度未知

Question

我试图在高度未知的容器中滚动元素。我有一个 div itemsHolder，它填满了 wrapper 容器的其余部分。 wrapper 容器可以有任何高度但包含具有固定高度的header 容器。所以我不知道 itemsHolder 的高度，我需要 div items 可以滚动。这是我尝试但未成功的代码。

总结一下。有包含 header 和 itemsHolder 的 wrapper 容器。 wrapper 的高度可变，header 的高度固定，itemsHolder 填充 wrapper 的其余部分(wrapper.高度 - header.height = itemsHolder.height)。我需要 div items 在 itemsHolder 中滚动而不使用 JS。

谢谢。

<div class="wrapper">
    <div class="header">
        title
    </div>
    <div class="itemsHolder">
        <div class="items">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>

CSS:

.wrapper {
    background: #ccc;
    height: 200px;   
    width: 100px;
    overflow: hidden;
}
.header {
    height: 50px;
    background: #00ffff;
}
.items {
    background: #ff00ff;
}
.itemsHolder {
    overflow: scroll;
}
.item {
    width: 100px;
    height: 80px;
    float: left;
}

http://jsfiddle.net/B2XUL/

更新:我不知道 wrapper 的大小，每次可能都不一样，因此我不知道 itemsHolder< 的高度 所以我无法修复它。

Answer 1

执行以下操作:

.wrapper {
    background: #ccc;
    height: 200px;   
    width: 100px;
}

.itemsHolder {
    height: 100%;
    overflow: auto;
    overflow-x:hidden;
    background: #ccc;
}

Demo