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;
}
If you mean that you want it to cover 100% vertically you can use the following:
source: https://www.sitepoint.com/css-viewport-units-quick-start/
You have to structure your code
html
correctly so that you have "X"<div>
inside another<div>
Also to make the resizing and margins purely automatic you have to set the values
auto
for the parametersheigth, width, margin y padding
, but this already depends on exactly how you want to style your page.div
are block elements, so putting backdisplay: block;
is somewhat redundant .position: absolute;
since they are just looking for the element in question to be accommodated depending on the values of top, bottom, left and right; then setting a width and a height of 100% should sufficediv
of the second and third will occupy the full available width of their parent container, which in this case is the labelbody
max-width
min-width
div
second and third not having oneposition
declared doesn't affect them at all whether you use:top
orleft
, etc. that is, they are superfluous and do not cause any visible result, you can remove themRegarding the minimum width that each of the second and third elements must reach:
This is best handled through a media query , but why?
min-width
example, then all the content is less or more than what you write, it will only be seen accommodated to that extent that you establishExample 1
Now if you are definitely looking for the
div
second and third to self-adjust depending on the content; perhaps it will serve you then to modify its nature, that is:div
of its behaviorbloque
to a mixedinline-block
behavior , where you can later assign it a minimum width of for example50%
div
with content, they will expand to the right.Example 2
References
In the rule
#home
:You must replace the property
height: 100%
withmin-height: 100vh
. This is because the former limits the element's height to the height of its parent element and therefore will not grow; while the second will establish that the minimum height of the element must be the height of the screen regardless of whether its position is relative, absolute or fixed.You must change
position: absolute
toposition: relative
.Important: It is not necessary to set
display: block
, since the elementsdiv
are elements of blocks.