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

I have a navigation panel <div> which has heigh:200px and position:fixed. This div should display a vertical scroll bar when it's content is higher than 200px but I don't know how to make that happen.

我有一个导航面板

,其高度为:200px,位置:固定。当div的内容高于200px时,此div应显示垂直滚动条,但我不知道如何实现这一点。

fiddle

I know the fiddle doesn't make much sense but I have a more complex scenario where I need this behaviour.

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

Thanks!

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

1 个解决方案

#1

Try overflow-y:scroll Fiddle.This has a container just to show that the position will be maintained

尝试overflow-y:滚动小提琴。这个容器只是为了显示位置将被保持

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