1

Tengo un div#padre que contiene dos div.hijos. El div#padre tiene un height absoluto de 600px, mientras que los div.hijos tienen un height auto. Intento que el segundo div.hijos tome la altura restante para rellenar el div #padre.

Nota: El primer div.hijos debe conservar hegith:auto.

Mi código en resumen sería lo siguiente:

<div id="padre" style="height:600px;">
   <div class="hijos" style="height:auto;">
       ......
   </div>
  
   <div class="hijos" style="height:auto;"> <!-- div que debe ajustarse -->
       ......
   </div>

</div>

*{
  margin: 0;
  padding: 0;
}

#padre{
  width:100%;
  height:300px;
  background:black;
}

.hijo1{
  width:100%;
  height:auto;
  background: blue;
  opacity: 0.8;
}

.hijo2{
  width:100%;
  height: auto;
  background: green;
  opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre">
  
  <div class="hijo1">
    <p>Hola</p>
    <p>Mundo</p>
  </div>
  
  <div class="hijo2">
    <p>HTML</p><p>HTML</p>
    <p>HTML</p><p>HTML</p>
    
  </div>

</div>

2
  • El tamaño del primer div varía ( es dinámico ) nunca superará a lo máximo la mitad del div#padre, ahora el segundo div debe adaptar su height para terminar de rellenar el div padre (sin escrolizarlo) Commented el 25 ago. 2020 a las 2:54
  • Al segundo div si puede tener scroll Commented el 25 ago. 2020 a las 3:15

2 respuestas 2

2

Una oportunidad para utilizar flexbox ahora que tiene mucho soporte, uno de los propositos de su implementacion fue escenarios como este, aqui puedes ver una solucion usando flexbox

<div id="padre" style="height:600px;">
   <div class="hijo1">
    <p>Hola</p>
    <p>Mundo</p>
  </div>
  
  <div class="hijo2">
    <p>HTML</p><p>HTML</p>
    <p>HTML</p><p>HTML</p>    
  </div>

</div>

y el CSS asi

* {
  margin: 0;
  padding: 0;
}

#padre{
  width:100%;
  height:300px;
  background:black;
  /* Aplicado al elem padre */
  display: flex;
  flex-direction: column;
}

.hijo1{
  width:100%;
  height:auto;
  background: blue;
  opacity: 0.8;
  color: #fff;
}

.hijo2{
  width:100%;
  height: auto;
  background: green;
  opacity: 0.8;
 /* Aplicado al hijo para autoajuste */
  flex: 1;
}

Ahora todo junto

* {
  margin: 0;
  padding: 0;
}

#padre{
  width:100%;
  height:300px;
  background:black;
  display: flex;
  flex-direction: column;
}

.hijo1{
  width:100%;
  height:auto;
  background: blue;
  opacity: 0.8;
  color: #fff;
}

.hijo2{
  width:100%;
  height: auto;
  background: green;
  opacity: 0.8;
  flex: 1;
}
<div id="padre" style="height:600px;">
   <div class="hijo1">
    <p>Hola</p>
    <p>Mundo</p>
  </div>
  
  <div class="hijo2">
    <p>HTML</p><p>HTML</p>
    <p>HTML</p><p>HTML</p>    
  </div>

</div>

1

Observaciones:

  • Mencionas que el div hijo1 es aquel que tendrá contenido dinámico y por lo cual infiero que puede incluso ese contenido su altura llegar a superar al ya antes mencionado, esto provocaría un desbordamiento de dicha información y que invada al área de su div hermano (el div hijo2).
    • Dado ese punto considero que debes aplicar un control para el posible desbordamiento con la propiedad overflow-y y con un valor de scroll
  • A este mismo div hijo1 le damos una altura del 50% de su contenedor y esta será en conjunto con el control de desbordamiento lo que impida que el contenido invada otro espacio
  • Finalmente al div hijo2 le damos también un alto del 50% de su contenedor

    <style>
      :root {
        --alto-definido: 50%;
      }
      #padre {
        border: 1px solid teal;
        height: 600px;
        
      }
      #hijo1 {
        border-bottom: 1px solid red;
        height: var(--alto-definido);
        overflow-y: scroll;
      }
      #hijo2 {
        height: var(--alto-definido);
      }
    </style>
    
    <div id="padre">
      <div id="hijo1">
        Hijo 1
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, ducimus, inventore! Ipsam labore obcaecati asperiores, reprehenderit voluptas voluptatem dignissimos, iusto, sequi aspernatur, commodi ratione! Perferendis impedit quaerat sunt asperiores accusantium.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit id cupiditate saepe ut, voluptas, fugit hic dolorem vitae iure iste debitis a facere illo distinctio eius. Quos enim nesciunt ratione?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, ducimus, inventore! Ipsam labore obcaecati asperiores, reprehenderit voluptas voluptatem dignissimos, iusto, sequi aspernatur, commodi ratione! Perferendis impedit quaerat sunt asperiores accusantium.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit id cupiditate saepe ut, voluptas, fugit hic dolorem vitae iure iste debitis a facere illo distinctio eius. Quos enim nesciunt ratione?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, ducimus, inventore! Ipsam labore obcaecati asperiores, reprehenderit voluptas voluptatem dignissimos, iusto, sequi aspernatur, commodi ratione! Perferendis impedit quaerat sunt asperiores accusantium.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit id cupiditate saepe ut, voluptas, fugit hic dolorem vitae iure iste debitis a facere illo distinctio eius. Quos enim nesciunt ratione?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, ducimus, inventore! Ipsam labore obcaecati asperiores, reprehenderit voluptas voluptatem dignissimos, iusto, sequi aspernatur, commodi ratione! Perferendis impedit quaerat sunt asperiores accusantium.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit id cupiditate saepe ut, voluptas, fugit hic dolorem vitae iure iste debitis a facere illo distinctio eius. Quos enim nesciunt ratione?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, ducimus, inventore! Ipsam labore obcaecati asperiores, reprehenderit voluptas voluptatem dignissimos, iusto, sequi aspernatur, commodi ratione! Perferendis impedit quaerat sunt asperiores accusantium.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit id cupiditate saepe ut, voluptas, fugit hic dolorem vitae iure iste debitis a facere illo distinctio eius. Quos enim nesciunt ratione?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, ducimus, inventore! Ipsam labore obcaecati asperiores, reprehenderit voluptas voluptatem dignissimos, iusto, sequi aspernatur, commodi ratione! Perferendis impedit quaerat sunt asperiores accusantium.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit id cupiditate saepe ut, voluptas, fugit hic dolorem vitae iure iste debitis a facere illo distinctio eius. Quos enim nesciunt ratione?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, ducimus, inventore! Ipsam labore obcaecati asperiores, reprehenderit voluptas voluptatem dignissimos, iusto, sequi aspernatur, commodi ratione! Perferendis impedit quaerat sunt asperiores accusantium.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit id cupiditate saepe ut, voluptas, fugit hic dolorem vitae iure iste debitis a facere illo distinctio eius. Quos enim nesciunt ratione?
        fin de todo
      </div>
      <div id="hijo2">
        Hijo 2
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam delectus vero expedita tempore, repudiandae quos voluptatem dolorem dicta quisquam dolore asperiores, labore blanditiis ratione dignissimos voluptatum eligendi porro deleniti consectetur.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, incidunt, dolor voluptatum, debitis ad at voluptatibus quasi ut accusantium excepturi et voluptate sunt ipsam vel praesentium neque fugiat distinctio maxime.
      </div>
    </div>

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.