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.