Три вертикально расположенных DIV с прокруткой посередине

Question

Можно ли сложить три DIV по вертикали и иметь только среднюю прокрутку div по вертикали?Я не хочу использовать высоту пикселей, потому что DIVs находятся внутри диалогового окна, которое можно изменять.Примерно так (извините за паршивое искусство ASCII):

+-----------+
|  Header   |
+-----------+
|          ^|
|          ||
|  Scroll  ||
|          ||
|          v|
+-----------+
|  Footer   |
+-----------+

Цель состоит в том, чтобы зафиксировать верхний и нижний колонтитулы, и, по мере роста диалога, средний div будет расти вертикально.Может быть, я просто тупой, но я боролся с этим последние несколько часов и не могу понять, что это правильно.Три DIV, вероятно, должны быть внутри «другого» DIV, но когда я делаю это и устанавливаю высоту на 100%, он увеличивается по мере роста среднего DIV.Опять же, это, наверное, что-то глупое, что я не считаю.Я также пытался использовать TABLE безрезультатно.

Спасибо за любую помощь.

Answer 1

Это должно работать

<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;">
</div>

---

Отредактировано - для фиксированного верхнего и нижнего колонтитула в модальном диалоге

<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;">
    <div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;">
    </div>
    <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;">
    </div>
    <div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;">
    </div>
</div>

Answer 2

Пересмотр этого на 2017 год. С помощью flexbox это теперь можно сделать без необходимости явно определять высоту верхнего и нижнего колонтитула. Это работает, по крайней мере с префиксом, во всех браузерах, которые в настоящее время имеют значительную долю рынка, кроме IE <= 10, доля которого все еще составляет 1-5% в зависимости от того, кого вы спрашиваете. Поскольку это, как правило, механизм наглядности и удобства использования, который не блокирует функциональность, использование flexbox для этого случая должно как минимум сделать вашу страницу пригодной для использования пользователями неподдерживаемых браузеров. </p>

Все, что вам нужно сделать, - это обернуть ваш заголовок, содержимое и нижний колонтитул в div, который имеет явную высоту (например, тело или дочерний элемент с высотой 100%) со стилями:

  display: flex;
  flex: auto;
  flex-direction: column;

И применить стиль к прокручиваемой панели:

  overflow-y: auto;

Если вы хотите, чтобы прокручиваемая панель увеличивалась, чтобы использовалось все вертикальное пространство:

  flex-grow: 1;

и в верхнем и нижнем колонтитулах (необходимо для Safari и IE 10):

  flex-grow: 0;

https://jsfiddle.net/ornsk10a/