位置为fixed的子元素无法滚动

Question

位置为fixed的子元素无法滚动

3

我有一个带有 position: fixed 的侧边栏。在这个侧边栏中，我有一个 .list，我想使用 overflow: scroll。但是，它并没有按照我想要的方式工作。

HTML

<div id="side">

    Stuff

    <div id="list">
        <div class="item">An item</div>
    </div>

</div>

CSS

#side {
    width: 20%;
    height: 100%;
    background-color: red;
    position: fixed;
}

#list {
    width: 100%;
    background-color: yellow;

    overflow: scroll;
}

.item {
    padding: 10px;
}

问题的JSFiddle：http://jsfiddle.net/wGE9W/（黄色的list无法滚动）

- Patrick Reck

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tckmn · Accepted Answer

添加一个 height:

#list {
    width: 100%;
    height: 500px;
    background-color: yellow;
    overflow: scroll;
}

更新的翻弄

高度需要是100% - Patrick Reck 46秒前

那么你为什么不能直接将其更改为100%？

#list {
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow: scroll;
}

Fiddle