3

Tengo dos div que contienen texto , uno de ellos tiene más que el otro y quiero que la altura del div con menos texto sea igual que la altura del que tiene más.

Es decir que el tamaño no sea fijo. ¿Se podría hacer con css?

#a,#b{
float:left;
border:1px solid;
}
section{
	width:75%;
	margin:0 auto;
}
<section>
<div id="a">
	gdaskgdsadgsjagdsajvd
</div>
<div id="b">
zzzzzzzzzzzzzzzzzzzzzzzzzzz
<P>aaaaaaaaaaaa
</div>
</section>

3
  • Sí se puede, por favor agrega el código html y css de dichos div.
    – Shaz
    Commented el 16 jun. 2017 a las 18:12
  • Para que un tamaño no sea fijo puedes agregarle la propiedad auto para que se ajuste solo según el contenido del elemento y sus demás propiedades de CSS. Pero si quieres que la altura del que tiene menos texto sea igual a la que tiene más, suena a que ya le estás dando una altura definida a dicho div, es decir que esta ya sea fija, entonces exactamente qué es lo que buscas hacer?
    – Yikarus
    Commented el 16 jun. 2017 a las 18:26
  • ¿entonces para que sea igual que la que tiene más contenido es necesario un tamaño fijo? Commented el 16 jun. 2017 a las 18:27

2 respuestas 2

3

Lo que buscas es FlexBox. Simplemente ponle display:flex a tu sección y el div de menor altura se adaptará al de mayor altura automáticamente:

#a,
#b {
  float: left;
  border: 1px solid;
}

section {
  width: 75%;
  margin: 0 auto;
  display:flex;
}
<section>
  <div id="a">
    gdaskgdsadgsjagdsajvd
  </div>
  <div id="b">
    zzzzzzzzzzzzzzzzzzzzzzzzzzz
    <P>aaaaaaaaaaaa</p>
  </div>
</section>

1
  • Perfecto muchas gracias. Commented el 16 jun. 2017 a las 19:27
0

Hola lo que puedes hacer es darle un altura al section y a los divs ponerles una altura del 100%.

section{
	height: 100px;
	margin: 0 auto;
}

#a, #b{
  float: left;
  border: 1px solid;
  height: 100%;
  margin: 2px;
}
<section>
  <div id="a">
    gdaskgdsadgsjagdsajvd
  </div>
  <div id="b">
    zzzzzzzzzzzzzzzzzzzzzzzzzzz
    <p>aaaaaaaaaaaa</p>
  </div>
</section>

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.