Question

我尝试在没有已知高度的容器内滚动项目。我有div itemsHolder，它填满了wrapper容器的其余部分。 wrapper容器可以具有任何高度，但包含具有固定高度的header容器。所以我不知道itemsHolder的高度，我需要div items才能滚动。这是我尝试的代码，但没有成功。

总结一下。包含wrapper和header的{{1}}容器。 itemsHolder具有可变高度，wrapper具有固定高度，header填充itemsHolder（wrapper）的其余部分。我需要div wrapper.height - header.height = itemsHolder.height才能在items内滚动而不使用JS。

感谢。

itemsHolder

CSS：

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

http://jsfiddle.net/B2XUL/

更新：我不知道.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; }的大小，每次都可能有所不同，因此我不知道{{1}的高度所以我无法修复它。

Answer 1

设置itemsHolder的高度，如有必要，它将添加滚动

.itemsHolder {
    overflow: scroll;
    height: 150px;
}

http://jsfiddle.net/B2XUL/4/

编辑：我很抱歉我无法解释原因，但是向.wrapper添加底部填充并设置.itemsHolder的高度似乎工作。设置时，您可能必须将包装器的大小减小35px。对此有任何解释，甚至更好的解决方案都会受到欢迎。

.wrapper {
    background: #ccc;
    height: 200px;   
    width: 100px;
    overflow: hidden;
    padding-bottom: 35px;
}
.itemsHolder {
    overflow: scroll;
    height: 100%;
}

（.items似乎也多余了吗？）

see updated fiddle

Answer 2

执行以下操作：

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

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

Demo

Answer 3

添加溢出自动：

.wrapper {
    background: #ccc;
    height: 200px;   
    width: 100px;
    overflow: hidden;
}
.header {
    height: 20%;
    background: #00ffff;
}
.items {
    background: #ff00ff;
}
.itemsHolder {
    height: 80%;
    overflow: auto;
    overflow-x: hidden;
}
.item {
    width: 100px;
    height: 80px;
    float: left;
}

如果您只想垂直滚动，请添加overflow-x：hidden。

Updated Fiddle

Answer 4

使用calc（）CSS属性，您可以实现wrapper.height - header.height = itemsHolder.height

.itemsHolder {
overflow: auto;
height:calc(100% - 50px);
}

Answer 5

js fiddle demo

.wrapper {
    background: #ccc;
    height: 200px;   
    width: 100px;
    overflow: hidden;
}
.header {
    height: 50px;
    background: #00ffff;
}
.items {
    background: #ff00ff;

}
.itemsHolder {
    max-height: 150px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.item {
    width: 100px;
    height: 80px;
    float: left;
}

enter image description here

容器内的可滚动div没有已知高度

5 个答案: