Адаптивная разметка с фиксированными элементами?

Question

[Yariik]

Нужно сделать так, чтобы топ бар был прижат к верху, футер соответственно к низу, но футер и блок основного контента должны быть резиновыми, то есть футер может расти в высоту, но блок контента должен быть прижат к нему, в свою очередь блок контента может расти и тогда должна включаться основная прокрутка.

Есть следующая разметка:

<div class="top-bar"></div>
<div class="content"></div>
<div class="footer"></div>

и стили

.top-bar{
height: 40px;
width: 100%;
position: fixed;
}
.content{
height: 100%;
width: 100%;
}
.footer{
height: auto;
width: 100%;
position: fixed;
}

Как это сделать?

Answer 1

[hzzzzl]

Comments

[Yariik]

по клику на MAKE LONGER футер перекрывает контент, мне нужно что б блок контента должен быть прижат к нему

[hzzzzl]

Yariik, ну ок, через js можно тогда к main добавить padding-bottom так

[Yariik]

hzzzzl, не подскажете еще, у меня футер меняется от набору текста, динамично, как быть в таким случаи?

[hzzzzl]

Yariik, так пусть когда меняется (как он меняется? от ввода пользователя?) вызывается эта addPadding() и пересчитывает