высота: 100% не работает

Я хочу, чтобы карусель DIV (s7) расширялась на высоту всего экрана. Я понятия не имею, почему это не удается. Чтобы увидеть страницу, вы можете перейти здесь.

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}
<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">
204
css height html

4 ответов

для того, чтобы процентное значение работало для высоты, высота родителя должна быть определена. Единственным исключением является root элемент <html>, который может быть высотой в процентах. .

Итак, вы дали всю высоту ваших элементов, за исключением <html>, Так что вы должны добавить это:

html {
    height: 100%;
}

и ваш код должен работать нормально.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}
<div id=fullheight>
  Lorem Ipsum        
</div>

пример JsFiddle.

300

так как никто не упоминал об этом..

Современный Подход:

в качестве альтернативы установке обоих html/ элемента 100%, вы также можете использовать viewport-процент длины:

5.1.2. Viewport-длина в процентах: единицы измерения "vw", "vh", "vmin", "vmax"

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

в этом случае вы можете использовать значение 100vh (что является высотой окна просмотра) -(пример)

body {
    height: 100vh;
}

задание min-height тоже работает. (пример)

body {
    min-height: 100vh;
}

эти устройства поддерживаются в большинстве современных браузеров -поддержка может быть найдена вот!--20-->.

107

Вам также нужно будет установить высоту 100% на html элемент:

html { height:100%; }
21

Если вы используете position: absolute затем height: 100% будет работать нормально.

16