How to Create Scrolling Content Div with Fixed Div Header-CodePudding

I am trying to make a simple div that contains the following:

A top div, which just contains a header text.

A bottom div which contains content that scrolls.

There are a few ways I believe I can do this, but I am not sure what is the recommended way.

The first is to have two sibling divs, such as: https://codepen.io/Sean713/pen/dyjyVga

<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>

.header {
  background-color: lightgrey;
  height: 100px;
}

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

The second is to nest them and use something like position: fixed;: https://codepen.io/Sean713/pen/KKBKXEm

<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>

.wrapper {
  background-color: grey;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.headerAndContent {
  flex: 1;
  background-color: darkgrey;
  overflow-y: scroll;
}

.header {
  position: fixed;
}

However this doesn't work the best because the header is see-through, when we scroll I can see the content behind the header. However it seems to have a better / more natural design in terms of the header being inside the entire content block.

Is there a standard practice or recommend method for this type of thing?

CodePudding user response：

For me I find that the best solution is to give the first div position:fixed then give it a background to hide the text behind, it's much simple like that and works perfectly. Here's an example of it:

* {
   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 >
    <div >
        <!-- this just to give some height for scrolling -->
    </div>
</div>