Статическая боковая панель и содержание жидкости с верхним и нижним колонтитулом
Привет, у меня возникла проблема с кодированием моего макета. Я хочу, чтобы моя боковая панель оставалась неизменной независимо от размера экрана, но мне также нужно, чтобы область моего контента была плавной. Верхний колонтитул остается вверху, и это то, что я хочу, проблема в том, что нижний колонтитул мне нужен, чтобы он всегда был внизу и на всю ширину области содержимого. Если кто-то может помочь, это будет высоко ценится.
Вот мой код.
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>