#header
{
position: absolute;
top: 0%;
height: 24px;
}
#body
{
position: absolute;
top: 24px;
bottom: 20%;
overflow: auto;
}
#footer
{
position: absolute;
bottom: 0px;
height: 17.2%;
min-height: 80px;
overflow: auto;
}
Моя проблема в том, что когда я сжимаю окно браузера, средний элемент («тело») начинает скользить в область нижнего колонтитула (когда 20% снизу становится больше, чем минимальная высота нижнего колонтитула). Нижний колонтитул может быть больше по высоте, чем его минимум, но он не может быть меньше.
Есть ли хороший способ сделать это без кода Javascript?