Tengo un encabezado que usa position: sticky; para pegarse a la página antes de la parte superior. Esto deja un espacio entre el encabezado y la parte superior de la página. Si se desplaza, puede ver que la división de contenido pasa por debajo y más allá del encabezado. Podría poner top: 0; para ocultar el desplazamiento, pero la brecha fue intencional. ¿Cómo podría arreglarse esto para que el contenido desplazado desaparezca antes de pasar el encabezado?
Intenté usar el desbordamiento, pero luego aparece la barra de desplazamiento dentro del propio div, donde quiero poder desplazarme a cualquier parte de la página. Al hacer zoom en la página, aparecen 2 barras de desplazamiento en lugar de solo 1. Además, dado que las esquinas del borde del encabezado están redondeadas, cuando se usa el desbordamiento, el div de contenido se detiene en el mismo punto que el encabezado y los bordes duros del div de contenido aparecerían debajo del esquinas redondeadas.
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 class="content"> <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>