Saltar al contenido

¿Cómo cambiar la altura de un div dinámicamente en función de otro div usando css?

Encontramos la respuesta a este enigma, o por lo menos eso esperamos. Si sigues con interrogantes deja tu comentario, que sin dudarlo te responderemos

Solución:

#container-of-boxes 
    display: table;
    width: 1158px;

#box-1 
    width: 578px;

#box-2 
    width: 386px;

#box-3 
    width: 194px;

#box-1, #box-2, #box-3 
    min-height: 210px;
    padding-bottom: 20px;
    display: table-cell;
    height: auto;
    overflow: hidden;

  • El contenedor debe tener display:table
  • Las cajas dentro del contenedor deben ser: display:table-cell
  • No ponga flotadores.

Especificando las posiciones podemos lograr esto,

.div1 
  width:300px;
  height: auto;
  background-color: grey;  
  border:1px solid;
  position:relative;
  overflow:auto;

.div2 
  width:150px;
  height:auto;
  background-color: #F4A460;  
  float:left;

.div3 
  width:150px;
  height:100%;
  position:absolute;
  right:0px;
  background-color: #FFFFE0;  
  float:right;

pero no es posible lograr esto usando float.

Sección de Reseñas y Valoraciones

Al final de todo puedes encontrar los comentarios de otros gestores de proyectos, tú además puedes mostrar el tuyo si te gusta.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : / /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *