Necesito ayuda, tengo problemas con un código CSS. tengo lo siguiente el documento tanto html y body los tengo seteados para que ocupen todo el alto y ancho de la pantalla. dentro de body tengo una caja contenedora, esa a su vez tiene dos cajas más cabecera y contenido, la cabecera no tiene un alto predefinido, pero quiero que la caja de contenido tome el restante del contenedor padre, pero le pongo un height alto y toma el alto de body y no el restante del contenedor, a continuación les anexo el código de ante mano gracias.
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
background: blue;
}
.contenido {
width: 100%;
height: 100%;
}
.cabecera {
background: red;
width: 100%;
}
.main {
width: 100%;
height: 100%;
background: #000;
color: #fff;
}
<div class="contenido">
<div class="cabecera">
<h1>Esto es la cabecera</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio explicabo quae sed nisi cupiditate mollitia praesentium, quisquam consequuntur expedita inventore eligendi placeat, ratione, ipsa reprehenderit voluptates deserunt, dicta facilis soluta.</p>
</div>
<div class="main">
<p>contenido principal</p>
</div>
</div>