Layout de dos columnas con encabezado y pie con div y css

estilos.css

*** en el caso en que se utilice en Angular, el body no ponerlo (iria en el index.html) ***

body {
padding: 0; margin: 0;
}

.encabezado
{
float: top;
width: 100%;
height: 14%;
}

.titulo
{
background-color: lightgray;
padding: 10px;
height: 100%
}

.principal
{
background-color: magenta;
width: 100%;
height: 86%;
}

.navegacion
{
float: left;
background-color: yellow;
width: 15%;
height: 92%;
overflow-y: auto;
}

.contenido
{
float: left;
background-color: orange;
width: 85%;
height: 92%;
overflow-y: auto;
}

.pie
{
background-color: red;
color: yellow;
font-weight: bold;
width: 100%;
height: 100%;
}

.seccion
{
padding: 10px;
}

.mensajes
{
background-color: pink;
color: blue;
height: 100%;
}

.menu
{
padding: 1px;
}

index.html

<div id="contenedor" style="height: 100vh">  
  <div class="encabezado">
    <div class="titulo">
      <div align="right">
        Encabezado
      </div>
    </div>
  </div>

  <div class="principal">   
    <div class="navegacion">
      <div class="menu">
        Menu
      </div>
    </div>

    <div class="contenido">     
      <div class="seccion">     
        Contenido
      </div>
    </div>

    <div class="pie">
      <div class="mensajes">
        Mensajes
      </div>
    </div>
  </div> 
</div>