0

Tengo que tener 3 divs, los cuales denominaré personalInfo_header, personalInfo_contenedor_central y personalInfo-footer. Los cuales los 3 están contenidos en un div con id main-container.

El inconveniente que tengo es que si tengo contenido en el div personalInfo_contenedor_central, este muchas veces sobrepasa su lugar y superpone al contenido de abajo, del div personalInfo-footer. ¿Cómo es posible solucionar esto?

El siguiente es el código HTML:

<div id="main-container">
    <div id="personalInfo_header">
    </div>
    <div id="personalInfo_contenedor_central">
    </div>
    <div id="personalInfo-footer">
    </div>
</div>

Este es el código css.

#main-container{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: calc(100% - 10px);
    height: 100%;
    top: 0;
  }

#personalInfo_header{
    height: 15%;
    width: 100%;
  
    position: fixed;
    top: 10%;
  
    display: flex;
    flex-direction: column-reverse;
    
    justify-content: flex-start;
  
    border:solid;
    border-color: green;
  }

#personalInfo_contenedor_central {
    height: 50%;
    width: 100%;
  
    position:relative;
    top:15%;   
      
    display: flex;
    flex-direction: column;
    align-items: center;

    border:solid;
    border-color: blue;
  
}

#personalInfo-footer{
    height: 25%;
    width: 100%;

    position:fixed;
    top:75%;   
          
    display: flex;
    flex-direction: column;
    align-items: center;

    border:solid;
    border-color: red;
  }

El problema es que tengo un formulario en personalInfo_contenedor_central que obtiene datos por un API REST y este es variable.

1
  • Lo que quiero es que uno se coloque abajo del otro independientemente del tamaño que ocupen los divs. Porque el tamaño es variable. Commented el 30 may. 2021 a las 22:19

1 respuesta 1

2
#personalInfo_contenedor_central {
    height: auto;
    width: auto;

*Como la altura la tenias en %50 supongo por razones de estilo, lo que puedes hacer es un margen o un padding...

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.