9

Cómo puedo poner el primer div al 100% de la pantalla y luego al bajar los demás div`s que sean auto dependiendo del contenido que tenga. el primer div se come el segundo ya se que es por el absolute pero no se como arreglarlo...

Este es el 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>

Este es el 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;
}
2
  • 1
    ¿Necesitas que el div home quede cubriendo toda la pestaña del navegador y que los otros dos queden encima de el?
    – user128299
    Commented el 27 dic. 2019 a las 9:04
  • 1
    si con el div home quiero cubrir toda la pantalla y el div about si galeria que vayan debajo del div home Commented el 27 dic. 2019 a las 9:09

4 respuestas 4

10

Si te refieres que quieres que cubra el 100% verticalmente puedes usar lo siguiente:

#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>

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

1
  • vale ya esta, quitando los position absolute y en el he puesto height 100vh; Commented el 27 dic. 2019 a las 10:04
7
  • Los div son elementos en bloque, por lo tanto colocar de nuevo display: block; es algo redundante
  • No veo la necesidad de position: absolute; ya que son eso solo buscas que el elemento en cuestión se acomode dependiendo de los valores de arriba, abajo, izquierda y derecha; entonces con colocar un ancho y un alto de 100% debe bastar
  • Por defecto cada div del segundo y tercero ocuparán el ancho completo disponible de su contenedor padre, que en este caso es la etiqueta body
  • Entonces si buscas un ancho dinámico, tal vez te beneficie mas:
    • max-width
    • min-width
  • Tus div segundo y tercero al no tener una position declarada no les afecta en lo absoluto que uses: top o left, etc. es decir están de mas y no causan resultado visible alguno, puedes quitarlas

Con respecto al ancho mínimo que debe alcanzar cada uno de los segundo y tercer elemento:

Esto será mejor que lo manejes a través de una media query, pero ¿por qué?

  • Si no le agregas un ancho dinámico, los div ocuparán el ancho total disponible
  • Si le agregas un min-width por ejemplo entonces todo el contenido sea menos o mas el que escribas se va a ver solo acomodado en esa medida que establezcas
  • Si lo haces por medio de una media query lograrás que cuando la pantalla se ajuste, entonces dichos div se modifiquen de ancho permitiendo el reacomodo del contenido

Ejemplo 1

    <style>
      body{
        margin: 0;
      }
      #home {
        background: teal;
        height: 100%;
        width: 100%;
      }
      #about, #galeria{
        background: tomato;
      }
    </style>
    <div id="home">
      lorendfdmf
    </div>
    <div id="about">
        1
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur provident placeat vel praesentium, numquam quod, aliquid ex ab voluptatem. Ipsum asperiores ab exercitationem nobis dolorum explicabo, aliquid dolores. Quas, quis.
    </div>
    <div id="galeria">
        2
    </div>

Ahora si en definitiva buscas que los div segundo y tercero se auto ajusten dependiendo del contenido; tal vez te sirva entonces modificar su naturaleza, es decir:

  • Pasar un div de su comportamiento bloque a un comportamiento mezclado inline-block, donde posteriormente le puedes asignar un ancho mínimo de por ejemplo 50%
  • Posterior por ejemplo a medida que llenes los div con contenido se expadirán a la derecha.

Ejemplo 2

    <style>
      body{
        margin: 0;
      }
      #home {
        background: teal;
        height: 100%;
        width: 100%;
      }
      #about, #galeria{
        margin: 0;
        background: tomato;
        display: inline-block;
        min-width: 50%;
      }
    </style>
    <div id="home">
      lorendfdmf
    </div>
    <div id="about">
      1 dfgdfgdgdfgdg
      ghhgfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
      gfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdgdfgdgfdfgdfgdfgdfgdfgdgdgdgdgdgdgdgdgd
    </div>
    <div id="galeria">
      2
    </div>

Referencias

7

Tienes que estructurar tu código html correctamente para que tengas "X" <div> dentro de otro <div>

Además para que la redimensión y los márgenes de forma puramente automática tienes que moner los valores auto para los parámetros heigth, width, margin y padding, pero esto ya depende de como quieras exactamente el estilo de tu página.

#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%;
    height: auto;
    width: auto;
    overflow:auto;
    margin:auto;
    padding:auto;
    text-align:center;
}
 <div id="home">
    contenido al 100% de la pantalla
    <div id="about">
    auto dependiendo del contendido de este div
      </div>
    <div id="galeria">
    auto dependiendo del contendido de este div
      </div>
</div>

2
  • Modificado, gracias por el aporte :D
    – Fergush
    Commented el 27 dic. 2019 a las 9:30
  • pues la pagina es mas compleja..... los div home about y galeria los tengo con position absolute home top:0 about top100% y galeria top200% pero mi problema es que en el div about tengo mas contenido y para responsive telefonos.... el div galeria me come parte del div about, haber si puedo subir la web en un servidor y ponerla de ejemplo Commented el 27 dic. 2019 a las 9:43
0

En la regla #home:

  • Debes reemplazar la propiedad height: 100% por min-height: 100vh. Esto es porque la primera limita la altura del elemento a la altura de su elemento padre y por lo tanto, no crecerá; mientras que la segunda establecerá que la altura mínima del elemento debe ser la altura de la pantalla con independencia de que su posición sea relativa, absoluta o fija.

  • Debes cambiar position: absolute por position: relative.

Importante: no es necesario establecer display: block, ya que los elementos div son elementos de bloques.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.