<div class="header-container">
    <div class="header">Here is the header!<br>What if there are more lines?<br>The header content may overflow!
   <br>Could you still see this line?</div>
</div>
<div class="content">Main body of the content</div>
body{
    margin:0px;
    background:#000;
}
.header-container {
    width:100%;
    position:fixed;
    top:0px;
    overflow: hidden;
}
.header {
    height:50px;
    background:#2980b9;
  color: #ffffff;
    border:0;
    width:100%;
    margin:0px auto;
    overflow: hidden;
}
.content {
    width:100%;
    background: #F0F0F0;
    border: 0;
    height: 2000px;
    margin: 50px auto;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.