html - CSS - 标题留在容器顶部

Question

我有这个可以滚动内容的容器。我希望此容器中的 header 始终位于顶部。

http://jsfiddle.net/z9ze5/

容器:

.lists {
    width: 300px;
    height: 250px;  
    margin: 30px auto;
    background: #39C;
    overflow: scroll;
    position: relative;
}

标题:

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: absolute;
    margin: 0;
    background: #DDD;
    z-index: 999;
}

Answer 1

如果您愿意更改标记，可以采用以下一种方法:

<div class="lists">
    <header class="box_header">
        <h1>HEADER 2</h1>
        <div class="setting" id="btn2"></div>
    </header>
    <section class="content">
        <p>Lorem Ipsum ....</p>
    </section>
</div>

将滚动区域包裹在 <section> 中(或其他 block 级元素)。

对于你的 CSS:

.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}

请参阅 fiddle :http://jsfiddle.net/audetwebdesign/nGGXx/

更高级的例子

如果你研究下面的例子:

http://jsfiddle.net/audetwebdesign/fBNTP/

您可以看到如何在半灵活布局中应用您的滚动框。我并排排列了两个滚动框，并使它们的宽度与页面的宽度成比例。

调整高度比较棘手。我固定了父容器的高度，规则如下:

.contentWrapper {
    border: 1px solid red;
    margin-top: 1.00em;
    padding: 30px 0;
    overflow: auto;
    height: 400px;
}

如果您将高度从 400 像素更改为其他值，滚动框将自行调整。

希望这些示例能让您和其他人更深入地了解如何构建这些更高级的布局设计。