具有固定高度和固定位置的div使内部内容滚动

Question

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

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:scroll Fiddle。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>