0

Estoy teniendo problemas en que el tamaño del div no se adapta al contenido, el cual es dinámico. Como pueden ver el fondo del div es color gris (background: #f3f2ef; )

Este es el código css:

  #ionContentHome{
    background:  #f3f2ef;  
    padding-top: 1px;
    width: 100%;
    height: 100%;  
  }

introducir la descripción de la imagen aquí

Cuando me refiero a que es dinámico es porque el contenido del div es:

< div id="ionContentHome">  
  <Elements /> 
</div>

const Elements = (props:{ arrangement: Array<any> , setVerEmail:any, setItem:any }) => {

  var arreglo=props.arrangement
  var i=0
  return (
      <div id="elementos">
        {props.arrangement.map((a) => {
          i=i+1
          //item, imagen personal, distancia, calificación, email, nombre, apellido, tipo
          return (<CardVistaVariosProveedores key={i} item={a[0]} personalImg={a[1]} distancia={a[2]} calificacion={a[3]} email={a[4]} nombre={a[5]} apellido={a[6]} tipo={a[7]} setVerEmail={props.setVerEmail} setItem={props.setItem} ></CardVistaVariosProveedores> ) 
        })
        }
    </div>
  )
3
  • Con lo que has expuesto en la pregunta es imposible reproducir tu error. Además compartes el css de un componente llamado #ionContentHome y en tu codigo solo hay un div #elementos. Por favor edita tu pregunta.
    – Jaime
    Commented el 21 sept. 2021 a las 23:55
  • Editado, de la forma implementado Commented el 22 sept. 2021 a las 0:17
  • 1
    ¿Has probado utilizando el valor auto? height: auto; Commented el 22 sept. 2021 a las 0:29

1 respuesta 1

1

Seria así:

#ionContentHome{
    background:  #f3f2ef;  
    padding-top: 1px;
    max-width: 100%; que el valor maximo sea el 100% de su father container
    height: auto;  //auto
}

Los elementos HTML no son capaces de tener una dimensión vertical del 100% salvo con un display:flex como elemento contenedor y no funciona en todos los elementos del mismo.

Coméntame por favor si te ha funcionado así

1
  • Gracias, ha funcionado. Commented el 22 sept. 2021 a las 0:41

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.