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

【问题标题】：div having fixed height and fixed position make inner content scroll具有固定高度和固定位置的 div 使内部内容滚动
【发布时间】：2015-01-16 08:53:28
【问题描述】：

我有一个导航面板<div>，其中有heigh:200px 和position:fixed。当它的内容高于 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;
}

【问题讨论】：

标签： html css css-position

【解决方案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>

【讨论】：