How to align absolute positioned sections with height: auto - css

Question

I am building a website with different sections with absolute positioning, one of the sections has a height: auto, I was trying to align them by setting up a top: x vh; but it didn't work since there is a height:auto value.
These are the sections:
#navbar{
position:fixed;
width:100%;
height:10vh;
top:0;
left:0;
}
#greeting{
position: absolute;
width:100%;
height:90vh;
top:10vh;
left:0;
}
#projects{
width:100%;
min-height:90vh;
height:auto;
position:absolute;
top:100vh;
left:0;
right:0;
}
I want to add a new section after projects but I couldn't set the top value.
https://codepen.io/Kairkan/pen/LYyoVRX?editors=1100
this is my full code on codepen
HTML
<section id="contact">
<h1 id="contact-h1">Let's work together</h1>
<h3 id="contact-h3">How do you take your coffee?</h3>
</section>
/////
CSS
#contact{
height:100vh;
width:100%;
position: absolute;
left:0;
right:0;
background-color: #393A42;
}
This is the subsequent section. But it stacks on the top of the page because I couldn't set the top: value

Answer 1

You have to reset the margin property in the body section as follows:
body {
margin: 0;
}
then you can remove position: absolute, top, and left.Then just position your sections one by one as follows:
#greeting {
margin-top: 10vh;
height:90vh;
// ... other styles
}
#projects{
min-height:90vh;
// ... other styles
}
#contact {
min-height: 90vh;
background: lightblue;
// ... other styles
}
ps. 1 You don't have to use width: 100% on div and other block elements because that makes no sense. see
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
ps. 2 Avoid styling with IDs. Use classes instead. see