Barra lateral estática e conteúdo de fluidos com cabeçalho e rodapé
Olá, estou com problemas para codificar meu layout. Quero que minha barra lateral permaneça a mesma, independentemente do tamanho da tela, mas também preciso que minha área de conteúdo seja fluida. O cabeçalho fica no topo, e é isso que eu quero, o problema é o rodapé. Eu preciso que ele fique sempre na parte inferior e em toda a largura da área de conteúdo. Se alguém puder ajudar, seria muito apreciado.
Aqui está o meu código.
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
}
#left {
width: 20%;
height: 100%;
float: left;
background-color: red;
}
#right {
float: left;
width: 80%;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: 80%;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>