Автоматическая настройка высоты div, чтобы заполнить пространство - CSS

Question

У меня есть верхний колонтитул <div id="header"></div>, средняя часть <div id="content"></div> и нижний колонтитул <div id="footer"></div>.

Верхний и нижний колонтитулы имеют фиксированную высоту 50px. Я хочу зафиксировать положения верхнего и нижнего колонтитула сверху и снизу и растянуть среднюю часть (содержимое), чтобы заполнить оставшееся пространство.

Как я могу это сделать?

Answer 1

Вы можете использовать position: absolute в нижнем колонтитуле и верхнем колонтитуле, а затем расположить нижний колонтитул снизу: 0px. Я бы сделал это так:

#header {
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2;
}

#footer {
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    z-index: 2;
}

#content {
    top: 50px;
    width: 100%;
    position: absolute;
    z-index: 1;
}

Answer 2

Я сделал это, определив стиль, как показано ниже:

#header, #content, #footer {
    position: absolute;
}
#header{
    top: 0;
    width: 100%;
    height: 50px;
    left: 0;
    right: 0;
}
#content {
    top: 50px;
    left: 0;
    right: 0;
    bottom: 50px;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
}

Вы можете увидеть мою скрипку здесь

Спасибо @ rocky3000 и@Mika для поддержки :)

Answer 3

Поиск липких нижних колонтитулов LINK здесь, на stackoverflow или с Google, и проблема исчезла.