How can I do a fixed header with some 100vh sections? - html

Question

I'm doing a website for training, and I want to do a fixed header with 4 sections that each one use all my viewport, also with this I want to use anchor to use link from the header to go to the sections.
I've tried to use a 100 padding top on body which works, but then my first section is not on the first page, I also tried using padding top on my section but it makes the background be higher and it's not aesthetic.
Here is the full code https://codepen.io/anon/pen/NZbdpB
Here is the css code :
*{
margin:0;
padding:0;
}
html {
height:100%;
scroll-behavior: smooth;
}
body{
background: #EEEEE3;
font-family: 'Montserrat', sans-serif;
min-height: 100%;
}
header {
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: auto;
height: 23vh;
width:100%;
top:0;
left:0;
background-color: #EEEEE3;
}
.section_a{
background: #B31B41;
height: 77vh;
padding-top: 23vh;
width: auto;
}
.section_b{
background: #FF5983;
height: 77vh;
padding-top: 23vh;
width: auto;
}
The excepted results is that the header will be fixed, the section will start right after the header, and the anchor will take me to the section without being cut or without having a huge padding in section that make the background "overflow"
Right now the results are that the background "overflow" as you can see in the CodePen.

Answer 1

A possible solution would be to add an anchor element inside of each sections (at the top) to offset the height of the fixed header:
<a class="anchor" id="second"></a>
Add the following styles to the anchor element:
.anchor {
display: block;
position: relative;
top: -46vh; /* height of the fixed header and the padding */
visibility: hidden;
}
Now, instead of linking to the section id, link to the anchor id.