Сделать div заполнить высоту оставшегося места на экране - PullRequest
Новая
       72

Сделать div заполнить высоту оставшегося места на экране

1596 голосов
/ 18 сентября 2008

Я работаю над веб-приложением, в котором я хочу, чтобы содержимое занимало всю высоту экрана.

Страница имеет заголовок, который содержит логотип и информацию об учетной записи. Это может быть произвольная высота. Я хочу, чтобы div содержимого заполнил оставшуюся часть страницы до конца.

У меня есть заголовок div и содержимое div. В данный момент я использую таблицу для разметки примерно так:

CSS и HTML 

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

Вся высота страницы заполнена, и прокрутка не требуется.

Для чего-либо внутри содержимого div, установка top: 0; поместит его прямо под заголовком. Иногда содержимое будет реальной таблицей с высотой, установленной на 100%. Ввод header внутрь content не позволит этому работать.

Есть ли способ добиться того же эффекта без использования table?

Обновление:

Элементы внутри содержимого div также будут иметь высоту, установленную в процентах. Так что что-то на 100% внутри div заполнит его до дна. Как будет два элемента на 50%.

Обновление 2:

Например, если заголовок занимает 20% высоты экрана, таблица, указанная в 50% внутри #content, займет 40% пространства экрана. Пока единственное, что работает - это завернуть все в таблицу.

Ответы [ 31 ]

0 голосов
/ 06 августа 2011

it никогда не работал для меня иначе, чем с использованием JavaScript , как NICCAI предложил в самом первом ответе. Я использую этот подход, чтобы изменить масштаб <div> с Google Maps.

Вот полный пример того, как это сделать (работает в Safari / FireFox / IE / iPhone / Andorid (работает с вращением)):

CSS 

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

JS 

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML 

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...