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

295

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

Развернуть фрагмент

html css height

— Эрл Ларсон
источник

2

Вот простое и ясное объяснение: stackoverflow.com/a/31728799/3597276

— Майкл Бенджамин

вероятно, лучшее решение для вложенных элементов, которые не должны растягиваться до высоты всего окна stackoverflow.com/questions/7049875/height-100-not-working/…

— B-GangsteR

409

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

— Призрак Мадары
источник

23

Итак, это может заставить меня выглядеть невероятно глупо, но что угодно : ты хочешь сказать, что <html>это фактический элемент - просто как <p>или <img />? Я думал, что единственной целью <html>было определить начало и конец документа HTML. Я имею в виду, я думал, что это было там, не для макета, а просто для того, чтобы браузер знал, какой тип документа он просматривает? Я совершенно ошеломлен.

— jay_t55

29

@Joey: HTML является фактическим элементом. Вы можете стилизовать его с помощью CSS, привязать к нему события в JavaScript, добавить классы и идентификаторы к нему, и он появится в DOM. Браузер принимает HTML-документ даже без <html>тега и даже без элементов <head>или <body>. Спецификации HTML, однако, считают этот <html>тег обязательным. Короче говоря, да, это полноценный элемент, как и все другие элементы HTML.

— Призрак Мадары

1

@SecondRikudo: Нет, <html>тег необязателен в соответствии со спецификациями (например, HTML4 и HTML5). И да, элемент создан в любом случае.

— Роберт Симер

2

хммм ... для меня, единственный способ, которым это сработало, было установить и то, htmlи другое ( bodyа height: 100%также, конечно, конкретное, которое divя хочу унаследовать на 100% высоты)

— Джеймс

1

@james Да, все родители должны иметь известный рост.

— Призрак Мадары

147

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

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

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

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

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

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

body {
    height: 100vh;
}

Настройка min-heightтакже работает. (пример)

body {
    min-height: 100vh;
}

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

— Джош Крозье
источник

1

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

— Роберт пошел

12

@RobertWent Есть преимущества. Например, height: 100%работает только если родительский элемент имеет определенную высоту. Конечно, есть некоторые случаи, когда родительский элемент не имеет определенной высоты, и процентные единицы области просмотра разрешают это. Другими словами, если бы у вас был глубоко вложенный элемент, вы могли бы просто установить его 100vh, и он имел бы высоту 100%браузера. Вы можете не видеть никаких преимуществ, но я был во многих случаях, когда они были единственным решением. Эти единицы могут быть не такими полезными для корневых элементов, как html/ body, но, тем не менее, это альтернатива

— Джош Крозье

2

Но мы говорим об элементе тела, а не о глубоко вложенном элементе. Существует только один возможный родительский элемент, элемент html. Вот почему я упомянул, что я не вижу никакой выгоды, и это, возможно, хуже, чем просто установить 100%. Ваш комментарий ничего не говорит, чтобы сделать меня худым в противном случае. То, что что-то новое, не делает его лучше. Это, однако, альтернатива.

— Роберт пошел

4

Проблема с этим подходом заключается в том, что iPhone исключает адресную строку и нижнюю навигацию из высоты просмотра, что означает body { height: 100vh }наличие полосы прокрутки при начальной загрузке страницы.

— BHOLT

2

Ницца. Я попробовал другой подход, я поставил height: 100% !important" to each parent til html` безуспешно, я видел в дом, что каждый узел дерева был на самом деле, 100%но мне не удалось установить 100% в желаемом элементе, но со стилем области просмотра было легко

— pmiranda

25

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

html { height:100%; }

— shanethehat
источник

20

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

— Стив Таубер
источник

4

Было бы здорово исправить, если бы я не использовал flexbox для создания своего макета. : /

— Лэндон Звоните

2

Не забудьте установить width:100%;и родитель position:relative;.

— Кай Ноак

8

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

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

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

#s7 {
   height: 100%;
}

— mrbengi
источник

5

если вы хотите, например, левый столбец (высота 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>

— YellowMart
источник

2

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

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— OBO
источник

5

Никогда не стоит использовать javascript, когда одного CSS достаточно.

— Bosworth99

1

Зачем даже делать что-то подобное и усложнять это больше, чем должно быть? Я не понимаю, некоторые ответы LOL ...

— CapturedTree

1

В странице источника я вижу следующее:

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

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

— Стивен
источник

Это странно, потому что это то, что я вижу на странице источника: <div class = "holder"> <tr> <td> <div id = "s7"> <div id = "posts">

— Эрл Ларсон,

Хорошо, хотя я не знаю, как вы получили код выше, я вошел и изменил <div id = "s7"> на <div id = "s7" style = "height: 100%;"> и это сработало. Возможно, это что-то скрывает от меня? В любом случае, спасибо :)

— Эрл Ларсон

1

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

Так что-то вроде этого:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— Кит Браун
источник

1

Я не понимаю, как это может работать, так как 50% относится к ширине, а не к высоте содержащего элемента, или я что-то здесь упускаю?

— DrLightman

0

Вот еще одно решение для людей, которые не хотят использовать html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

Развернуть фрагмент

— TheMisir
источник