0

Intentaré explicar lo que quiero. Ahora mismo tengo 2 divs (div 1 de height 30px por ejemplo y div 2 que ocupa el resto de la pantalla) uno debajo del otro. Pero dentro del div 2 quiero tener otros 2 divs,uno debajo del otro (div 3 y div 4). Y estos quiero que ocupen el 50% respecto al div 2. ¿Hay alguna forma usando únicamente css y html (que se adapte a la pantalla)?

He probado con absolute pero se me pone el div 3 debajo del div 4 como si cogiese el 50% del viewport en vez del 50% del div.

Espero haberme explicado bien. Disculpadme pero el código no lo puedo compartir. Pero me gustaría un pequeño ejemplo de como hacerlo para después escalarlo a mi aplicación.

Ahora mismo tengo algo así: introducir la descripción de la imagen aquí

Pero, quiero algo así:

introducir la descripción de la imagen aquí

3
  • Muestra como lo tienes en el código por favor
    – Luis
    Commented el 22 nov. 2022 a las 16:56
  • ¿Por qué no puedes compartir tu código?
    – phpMyGuel
    Commented el 22 nov. 2022 a las 16:58
  • Simplemente se hace un cálculo de medidas en CSS con calc() y variables si sabes de ese atributo ? Commented el 22 nov. 2022 a las 17:01

1 respuesta 1

1

Te dejo un ejemplo con display flex, donde se aprecia la distribución de espacio entre contenedores así como su alineación, recuerda respetar y asignar tamaños de elementos hijos respecto al total del tamaño del contenedor padre.

/*ELIMINAMOS ESTILOS POR DEFECTO*/

* {
  padding: 0px;
  margin: 0px;
}


/*CUERPO DE LA PAGINA LE ASIGANKOS DISPLAY FLEX Y ALINEACION EN COLUMNA*/

body {
  width: 100%;
  height: 700px;
  display: flex;
  flex-direction: column;
}


/*PRIMER DIV*/

.div1 {
  width: 100%;
  height: 100px;
  background-color: red;
}


/*DIV2 QUE CONTIENE DETRO LOS OTROS DOS DIVS*/

.div2 {
  /*ASIGANOS DISPLAY FLEX*/
  display: flex;
  /*DIRECCION EN COLUMNA*/
  flex-direction: column;
  /*CENTRAMOS EN EJE X*/
  align-items: center;
  /*CENTRAMOS EN EJE Y*/
  justify-content: center;
  width: 100%;
  height: 500px;
  background-color: grey;
}

.div3 {
  width: 95%;
  /*AQUI ASIGNAS EL TAMAÑO DE ALTO SIN EXEDER EL LIMITE DEL PADRE CONTENDOR*/
  height: 200px;
  background-color: green;
}

.div4 {
  width: 95%;
  /*AQUI ASIGNAS EL TAMAÑO DE ALTO SIN EXEDER EL LIMITE DEL PADRE CONTENDOR*/
  height: 200px;
  background-color: blue;
}
<html>

<body>
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
    <div class="div3">
      div3
    </div>
    <div class="div4">
      div4
    </div>
  </div>
</body>

</html>

Juega cambiando el tamaño height y width de los contenedores para apreciar su distribución, si no necesitas la alineacion centrada en X y Y la puedes eliminar.

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.