css - 如何在div顶部设置一个固定位置并且不滚动

Question

我有一个以 overflow-y:auto 作为容器的 div，还有两个 div:一个用于标题，一个用于内容。

我需要滚动容器，但顶部的标题必须是静态的。像这样:

<div class="table-container">
    <div class="table-title">
        <h2>My Title</h2>
    </div>
    <div class="table-content">
        ...
    </div>
</div>

我试过 position:absolute 到 .table-title 但没有卡在顶部。

这是一个演示:http://jsfiddle.net/junihh/faqm85xy/1/

如何设置.table-title在容器顶部的固定位置？

感谢任何帮助或评论。

Answer 1

我认为您只想使内容区域可滚动，而不是标题。在这种情况下不需要固定位置。

.table-title {
    background-color: #666;
}
.table-content {
    height: 200px; /*set a height*/
    overflow-y: auto;
}

.table-container {
    margin: 0 auto;
    width: 350px;
    background-color: #DBDBDB;
}
.table-title {
    background-color: #666;
}
.table-content {
    height: 200px; /*set a height*/
    overflow-y: auto;
}
h2, p {
    margin: 0;
    padding: 10px 15px;
    font: normal 1em/1 Arial, Helvetica, sans-serif;
}
h2 {
    font-size: 1.2em;
    color: #FFF;
    font-weight: bold;
}
p {
    line-height: 140%;
}
p:nth-of-type(odd) {
    background-color: #EBEBEB;
}

<div class="table-container">
    <div class="table-title">
        <h2>My Title</h2>
    </div>
    <div class="table-content">
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
        <p>Lorem ipsum Minim laborum aute Duis pariatur quis dolore dolor in magna ut dolor est sed cupidatat consequat consequat culpa deserunt commodo deserunt in nulla consequat est est.</p>
    </div>
</div>

更新演示: http://jsfiddle.net/7ngg8f03/