如何创建固定Div标题的滚动内容Div

Question

我正在尝试创建一个包含以下内容的简单div:

顶部的div，只包含一个标题文本。

底部的div，包含可以滚动的内容。

我相信有几种方法可以做到这一点，但我不确定哪一种是推荐的方法。

第一种是有两个兄弟div，例如:https://codepen.io/Sean713/pen/dyjyVga

.header {
background-color: lightgrey;
height: 100px;
}
.content {
background-color: grey;
height: 100px;
overflow-y: scroll;
}

<div class = 'wrapper'>
<div 
class='header'>I am the header
</div>
<div class='content'>
<p>I can scroll</p>
<p>I can scroll</p>
<p>I can scroll</p>
<p>I can scroll</p>
<p>I can scroll</p>
<p>I can scroll</p>
</div>
</div>

第二种是嵌套它们，并使用position: fixed;: https://codepen.io/Sean713/pen/KKBKXEm

.wrapper {
background-color: grey;
height: 200px;
display: flex;
flex-direction: column;
}
.headerAndContent {
flex: 1;
background-color: darkgrey;
overflow-y: scroll;
}
.header {
position: fixed;
}

<div class='wrapper'>
<div class='headerAndContent'>
<div class='header'>I am the header</div>
<p>I am content</p>
<p>I am content</p>
<p>I am content</p>
<p>I am content</p>
<p>I am content</p>
<p>I am content</p>
<p>I am content</p>
<p>I am content</p>
<p>I am content</p>
<p>I am content</p>
</div>
</div>

然而，这并不是最好的工作，因为标题是透明的，当我们滚动我可以看到标题后面的内容。然而，它似乎有一个更好的/更自然的设计方面的标题是在整个内容块。

对于这类事情有标准的做法或推荐的方法吗?

Answer 1

对我来说，我发现最好的解决方案是给第一个divposition:fixed，然后给它一个背景来隐藏后面的文本，这很简单，工作完美。下面是一个例子:

* {
margin:0;
padding:0;
}
header {
position: fixed;
top: 0;
left: 0;
height:45px;
background: transparent;
width: 100%;
/*You can get rid of these styles*/
display:flex;
align-items:center;
justify-content:center;
border:1px solid #eee;
}
.content {
position:fixed;
top:45px;
left:0;
width: 100%;
height: 100vh;
overflow-y:scroll;
/*You can get rid of these styles*/
background: #eee;
}
.height {
height:1000px;
/*You can get rid of these styles*/
background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Draw-1-black-line.svg/1200px-Draw-1-black-line.svg.png);
background-size:50px;
background-repeat:repeat;
}

<header>Some Header Text :D</header>
<div class="content">
<div class="height">
<!-- this just to give some height for scrolling -->
</div>
</div>

Answer 2

you can also use CSS position sticky property

<header>Some Header Text :D</header>
<div class="content">
<div class="height">
<!-- this just to give some height for scrolling -->
</div>
</div>
CSS
header {
position:sticky;
top:0;
height:45px;
background: white;
width: 100%;
/*You can get rid of these styles*/
display:flex;
align-items:center;
justify-content:center;
border:1px solid #eee;
}