Css высота 100%

0

У меня есть следующий html:

<body>
<div id="page">
   <div id="header"></div>
   <div id="content"></div>
</div>
</body>

и css:

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

#page {
  height:100%;
  margin:auto;
  left:0;
  right:0;
  width:500px;
}

#header {
  height:100px;
  width:500px;
}

#content {
   width:500px;
   height:100%;
}

Проблема в том, что content div - это высота окна + высота заголовка. Как я могу сделать это высотой окна - высоту заголовка, я хочу растянуть горизонтально по всему оставшемуся окну. ??

  • 0
    Вы хотите что-то подобное? jsfiddle.net/3nC7Y/3 - @user2361682 user2361682
Теги:
height

3 ответа

0
Лучший ответ

Если вам не нужно поддерживать IE7 и ниже - вы можете использовать полезный трюк с

position: absolute

для #header и

padding-top: 100px;
box-sizing: border-box;

для #content.

Посмотрите эту скрипку: http://jsfiddle.net/Jx4sC/2/

Подробная информация о поддержке размера коробки: http://caniuse.com/#feat=css3-boxsizing

Поделиться
0

Вы можете использовать calc() в современных браузерах и позволить браузеру рассчитать высоту вашего окна содержимого:

#content {
   width:500px;
   height: calc(100% - 100px);
}

Аналогичным образом вы можете использовать какой-то JavaScript, чтобы сделать то же самое. Но затем обязательно обновляйте свои расчеты каждый раз, когда изменяется высота браузера.

Поделиться
  • 0
    Я бы предпочел метод, который работает и для не современных браузеров :)
  • 0
    @ user2361682 Тогда вы можете либо искать полифилл, либо кодировать что-то похожее в JS.
0

Это невероятно взломанно, и вы можете не делать этого. например, предположим, что вы хотите присвоить #content фоновый цвет, вместо этого поставьте его на #page.

html,body {
  margin:0;
  padding:0; 
  /* body should have height:100% by default */
}

#page {
  height:100%;
  margin: 0 auto;
  width:500px;
  /* use page as you would have used #content*/
}

#header {
  height:100px;
}

#content {

}

редактирование: но если вам действительно нужно это сделать, вы можете сделать это так

#page {
   position: relative;
}
#content{
   position: absolute; 
   top: 100px;
   bottom: 0px;
   left: 0px;
   right: 0px;
}

это не идеально, потому что если вы хотите сделать #header больше, вам нужно помнить о том, чтобы обновлять #content, вы больше не можете использовать обычную макет страницы

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню