0

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

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

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

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

2 ответа 2

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.

2
  • вариант с внесением их в таблицу рассматривал, но тогда они напрямую зависят от количества колонок, которые были не определены, тогда лишь оставалось бы объединить ячейки, но это уже лишнее
    – Ni55aN
    7 апр 2015 в 13:54
  • 1
    Если контент заранее не известен, то лучше будет сделать вариант с display: table - codepen.io/anon/pen/zxQjpw. Теперь #menu и #prompt могут быть любой высоты, можно добавить вертикальное позиционирование, а так же нет зависимости от контента. 7 апр 2015 в 14:14
0

для html,body задать height:100%; и потом уже вашему блоку height:100%;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.