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

Question

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

小提琴

我知道小提琴没有什么意义，但是我有一个更复杂的场景，需要这种行为。

谢谢！

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 。 它有一个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>