div 固定高度和固定位置使内容滚动

Question

我有一个导航面板 <div>，其中有 heigh:200px 和 position:fixed。 div 当内容高于 200px 时应该显示垂直滚动条，但我不知道如何实现。

我知道 fiddle 没有多大意义，但我有一个更复杂的场景，我需要这种行为。

谢谢！

HTML:

<div class="fixed">
    <div class="content">
        <h1>
            title1
        </h1>
        <h1>
            title2
        </h1>
        <h1>
            title3
        </h1>
        <h1>
            title4
        </h1>
        <h1>
            title5
        </h1>
        <h1>
            title6
        </h1>
        <h1>
            title7
        </h1>
    </div>
</div>

CSS:

.fixed {
    height: 200px;
    position: fixed;
    top: 50px;
    overflow: hidden;
}

Answer 1

试试overflow-y:scrollFiddle.This有一个container刚好说明会保持位置

.fixed {
    height: 200px;
    position: fixed;
    top: 50px;
    
    overflow-y:scroll;
}

<div class="fixed">
    <div class="content">
        <h1>
            title1
        </h1>
        <h1>
            title2
        </h1>
        <h1>
            title3
        </h1>
        <h1>
            title4
        </h1>
        <h1>
            title5
        </h1>
        <h1>
            title6
        </h1>
        <h1>
            title7
        </h1>
    </div>
</div>

div 固定高度和固定位置使内容滚动

div having fixed height and fixed position make inner content scroll

html

css

css-position