Почему высота: 100% не работает, чтобы увеличить div до высоты экрана? - PullRequest
Новая
       20

Почему высота: 100% не работает, чтобы увеличить div до высоты экрана?

238 голосов
/ 13 августа 2011

Я хочу, чтобы карусель 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">

Ответы [ 9 ]

348 голосов
/ 13 августа 2011

Чтобы процентное значение работало для высоты, необходимо определить высоту родителя. Единственным исключением является элемент 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 .

121 голосов
/ 24 января 2015

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

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

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

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

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

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

body {
    height: 100vh;
}

Установка min-height также работает. (пример) 

body {
    min-height: 100vh;
}

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

21 голосов
/ 13 августа 2011

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

html { height:100%; }
19 голосов
/ 19 июня 2013

В качестве альтернативы, если вы используете position: absolute, то height: 100% будет работать очень хорошо.

6 голосов
/ 21 мая 2015

Вы должны попробовать с родительскими элементами; 

html, body, form, main {
    height: 100%;
}

Тогда этого будет достаточно: 

#s7 {
   height: 100%;
}
4 голосов
/ 19 июля 2012

, если вы хотите, например, левый столбец (высота 100%) и содержимое (высота авто) Вы можете использовать абсолют: 

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

в html: 

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>
1 голос
/ 18 апреля 2013

Это не может быть идеальным, но вы всегда можете сделать это с помощью JavaScript.Или в моем случае jQuery 

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
0 голосов
/ 13 августа 2014

Если вы абсолютно позиционируете элементы внутри div, вы можете установить верхний и нижний отступы на 50%.

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

В исходном коде страницы вижу следующее: 

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Если вы поместите значение высоты в тег, он будет использовать его вместо высоты, определенной в файле CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...