html – How to put a div at 100% and below other div`s auto?

Question:

How can I put the first div at 100% of the screen and then when lowering the other div`s they are auto depending on the content they have. the first div eats the second one I know it's because of the absolute but I don't know how to fix it…

this is the html

 <div id="home">
    contenido al 100% de la pantalla
      </div>
    <div id="about">
    auto dependiendo del contendido de este div
      </div>
    <div id="galeria">
    auto dependiendo del contendido de este div
      </div>

this is the css

#home{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    background-image:url(../image/Construction_0.png);
    background-position:50% 50%;
    background-size:cover;
}

#about, #galeria{
    width:100%;
    overflow:auto;
    display:block;
    margin:0;
    padding:0;
    text-align:center;
}

Answer:

If you mean that you want it to cover 100% vertically you can use the following:

#home{
    height: 100vh;
    width:100%;
    margin:0;
    padding:0;
    background-position:50% 50%;
    background-size:cover;
}

#about, #galeria{
    width:100%;
    display:block;
    margin:0;
    padding:0;
    text-align:center;
}

<div id="home" style="background: #fafafa">
    contenido al 100% de la pantalla
      </div>
    <div id="about" style="background: #eaeaea">
    auto<br> dependiendo<br> del <br>contendido<br> de<br> este<br> div<br>
      </div>
    <div id="galeria" style="background: #c9c9c9">
    auto <br><br>dependiendo<br><br> del<br><br> contendido<br><br> de<br><br> este<br><br> div<br><br>
      </div>

source: https://www.sitepoint.com/css-viewport-units-quick-start/