How to stop a div from scrolling past header when using position; sticky?-CodePudding

I have a header that uses position: sticky; to stick to the page before the top. This leaves a gap between the header and the top of the page. If you scroll, you can see the content div going under and past the header. I could put top: 0; to hide the scrolling, but the gap was intentional. How could this be fixed so that the scrolled content disappears before going past the header?

I've tried using overflow, but then the scrollbar appears inside of the div itself, where as I want to be able to scroll anywhere on the page. When zooming in on the page, 2 scrollbars appear instead of just 1. Also since the header border corners are rounded, when using overflow the content div stops at the same point as the header and the hard edges of the content div would appear below the rounded corners.

body {
  margin: 40px;
}

#container {
  display: flex;
  flex-direction: column;
}

#header {
  height: 100px;
  background-color: lightblue;
  border: 6px solid black;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  position: sticky;
  position: -webkit-sticky;
  top: 40px;
}

.content {
  background-color: green;
  border-left: 6px solid black;
  border-right: 6px solid black;
}

#footer {
  height: 100px;
  background-color: lightblue;
  border: 6px solid black;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

<div id="container">
  <div id="header">
    <h1>Header</h1>
  </div>

  <div >
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
    <h2>CONTENT</h2>
  </div>

  <div id="footer">
    <h1>Footer</h1>
  </div>
</div>

CodePudding user response：

You can add this:

position: fixed;

Add this to the div and see if it works.

CodePudding user response：

You have header right but above that header you have also on div cover all code do one think put header on top with no div only header and put header postion:sticky; and set top=0;