Высота таблицы на все оставшееся место

Рейтинг: 0Ответов: 1Опубликовано: 03.04.2015

В следующем каркасе:

<div id="menu"></div>
<table style="height:100%;>
 <!-- content -->
</table>
<div id="prompt"></div>

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

Как осуществить определение высоты по оставшемся месту?
Пока, как вариант, сделал в таблице padding'и сверху и снизу, и соответствующие им отрицательные margin'ы. С виду - не костыль, но может есть другие способы?

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Можно сделать без отрицательных margin'ов, если есть возможно добавить для родительского контейнера position отличный от static. Тогда для #menu и #prompt добавляем postion: absolute, а для таблицы добавляем padding'и нужной высоты.

Пример http://codepen.io/anon/pen/xbNWMO

Но вариант лучше - это сделать #menu и #prompt частью таблицы, например: http://codepen.io/anon/pen/WbBJNm. Здесь не будет зависимости от высоты контента #menu и #prompt, плюсом еще вертикальное позиционирование.

Вариант лучше предыдущего - это переписать на блочную верстку (display: table\table-row\table-cell) или flex.