How to align absolute positioned sections with height: auto

user_16679682 0
Viewed 60

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

css
1 Answers

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

user_148971690
Related