1

tengo el siguiente maquetado de pruebas:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            height: 100%;
        }
        .cabecera{
            background: tomato;
        }
        .columnaiz{
            background: wheat;
            flex-grow: 1;
        }
        .columnade{
            background: yellowgreen;
            flex-grow: 5;
        }
        .footer{
            background: yellow;
        }
        .container{
            position:absolute;
            background: turquoise;
            width: 100%;
            height: 100%;
            display:flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .containerII{
            background: lightslategrey;
            display:flex;
            height: 100%;
        }
        .item1{
            background: white;
            height: 200px;
        }
        .item2{
            background: slategrey;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cabecera">CABECERA</div>
        <div class="containerII">
            <div class="columnaiz">COLUMNA IZQ</div>
            <div class="columnade">
                <div class="item1">ITEM</div>
                    <div class="item2">ITEM</div>
                    <div class="item1">ITEM</div>
                    <div class="item2">ITEM</div>
                    <!-- <div class="item1">ITEM</div>
                    <div class="item2">ITEM</div> -->
            </div>
        </div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

asi es como yo quiero que queden los contenedores COLUMNAIZ y COLUMNADE (conteniendo los items), que aunque los items no llenen la altura total del contenedor, el contenedor si ocupe el 100% de la altura del documento. el caso es que si descomento los items ya se pasa la altura y hacen un overflow quedando el footer de manera incorrecta. Eso lo soluciono cambiando en el contenedor principal Position:absolute; por Position:relative; por lo cual el footer se desplaza hacia abajo a medida que crecen los items. El caso es que de esa forma cuando los items son menos que la altura el footer no queda pegado al margen inferior de la pantalla sino que lo hace a los items. De seguro a de haber una forma de lograrlo con css (con js si se puede) pero llevo 2 dias sin encontrarla.

6
  • Tal vez no estoy entendiendo. El efecto de desbordamiento se puede controlar con doble anidación de modo que un contenedor intermedio tenga los scrollers y esté encajado en el exterior a 100%. Así, los elementos deslizables nunca producen efectos visuales no deseados. Y el exterior tiene el atributo de estilo overflow: hidden
    – quevedo
    Commented el 1 mar. 2021 a las 15:57
  • Pero de esa forma el footer quedaria fijo (creo) y yo quiero que se desplace hacia abajo con los items. Eso lo consigo con absolute y height 100%, pero cuando hay menos items que la altura d pantalla el footer se sube hasta los items Commented el 1 mar. 2021 a las 16:14
  • Si, queda fijo, pero como el desplazamiento es interior siempre se abarca la altura de pantalla disponible. (que en cierta forma es elegante)
    – quevedo
    Commented el 1 mar. 2021 a las 16:20
  • Gracias por tu respuesta pero yo necesito que el footer se desplace con los items porque asi lo requiere el diseño Commented el 1 mar. 2021 a las 16:30
  • Y, que debe pasar con el vacío a izquierda? La solución que ofrece @Franco luce adecuada.
    – quevedo
    Commented el 1 mar. 2021 a las 16:44

1 respuesta 1

1

No entendí tu explicación del por que el contenedor tiene position absolute, pero no es necesaria, descomente los items y funciona bien

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .cabecera {
        background: tomato;
      }
      .columnaiz {
        background: wheat;
        flex-grow: 1;
      }
      .columnade {
        background: yellowgreen;
        flex-grow: 5;
      }
      .footer {
        background: yellow;
      }
      .container {
        background: turquoise;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .containerII {
        background: lightslategrey;
        display: flex;
        height: 100%;
        min-height: 100vh;
      }
      .item1 {
        background: white;
        height: 200px;
      }
      .item2 {
        background: slategrey;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="cabecera">CABECERA</div>
      <div class="containerII">
        <div class="columnaiz">COLUMNA IZQ</div>
        <div class="columnade">
          <div class="item1">ITEM</div>
        </div>
      </div>
      <div class="footer">FOOTER</div>
    </div>
  </body>
</html>

EDIT:

La cabecera y el footer deben tener un tamaño fijo, luego ese tamaño fijo se suma para calcular la altura del contenedor de los ítems en este caso le di 20 px al footer y a la cabecera por lo que la altura minima del contenedor quedaría min-height: calc(100vh - 40px); esta altura se usaría cuando la altura de los items no superen la altura del viewport, en que caso de que si la superen pasaria a usar la altura máxima height: 100%;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .cabecera {
        height: 20px;
        background: tomato;
      }
      .columnaiz {
        background: wheat;
        flex-grow: 1;
      }
      .columnade {
        background: yellowgreen;
        flex-grow: 5;
      }
      .footer {
        height: 20px;
        background: yellow;
      }
      .container {
        background: turquoise;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .containerII {
        background: lightslategrey;
        display: flex;
        height: 100%;
        min-height: calc(100vh - 40px);
      }
      .item1 {
        background: white;
        height: 200px;
      }
      .item2 {
        background: slategrey;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="cabecera">CABECERA</div>
      <div class="containerII">
        <div class="columnaiz">COLUMNA IZQ</div>
        <div class="columnade">
          <div class="item2">ITEM</div>
        </div>
      </div>
      <div class="footer">FOOTER</div>
    </div>
  </body>
</html>

O también puedes agregarle un scroll al contenedor de los items cuando superen la altura del viewport de la siguiente manera:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    
        <style>
          * {
            padding: 0;
            margin: 0;
          }
    
          .cabecera {
            height: 20px;
            background: tomato;
          }
          .columnaiz {
            background: wheat;
            flex-grow: 1;
          }
          .columnade {
            background: yellowgreen;
            flex-grow: 5;
            overflow-y: scroll;
          }
          .footer {
            height: 20px;
            background: yellow;
          }
          .container {
            background: turquoise;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          .containerII {
            background: lightslategrey;
            display: flex;
            height: calc(100vh - 40px);
          }
          .item1 {
            background: white;
            height: 200px;
          }
          .item2 {
            background: slategrey;
            height: 200px;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="cabecera">CABECERA</div>
          <div class="containerII">
            <div class="columnaiz">COLUMNA IZQ</div>
            <div class="columnade">
              <div class="item2">ITEM</div>
              <div class="item2">ITEM</div>
    
              <div class="item2">ITEM</div>
    
              <div class="item2">ITEM</div>
    
              <div class="item2">ITEM</div>
            </div>
          </div>
          <div class="footer">FOOTER</div>
        </div>
      </body>
    </html>

11
  • 1
    Es bastante difícil entenderte, leí la conversación de arriba y creo que ahora entiendo un poco mejor tu problema, edite la respuesta, pruébalo nuevamente
    – Franco
    Commented el 1 mar. 2021 a las 19:53
  • 1
    Ahora si, con un min-height se debería arreglar, vuelve a checkearlo y dime si te funciono, saludos
    – Franco
    Commented el 1 mar. 2021 a las 21:26
  • 1
    Que raro, a mi el footer no me produce scroll, ni a pantalla completa ni en responsive, te produce scroll horizontal o vertical?
    – Franco
    Commented el 1 mar. 2021 a las 21:58
  • 1
    El scroll lo produce la pagina no el footer. el scroll de la pagina se puede solucionar solo si hay pocos items, si no habria que ponerle un scroll al contenedor de los items
    – Franco
    Commented el 1 mar. 2021 a las 22:33
  • 1
    Volví a editarlo, ahora si creo que ya quedo.
    – Franco
    Commented el 1 mar. 2021 a las 23:07

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.