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
    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
    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? 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. 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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