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/