Чому не висота: 100% працює над розширенням знаків до висоти екрана?

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-гангстер

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

Я взагалі не бачу користі для цього. Чи не створює це додаткова робота для браузера, який повинен обчислити все, що стосується вікна перегляду браузера? Розмір розмірів Viewport виявляється корисним лише тоді, коли ви хочете фактично розмістити щось, пов’язане з висотою браузера.

— Роберт Пішов

12

@RobertWent Є переваги. Наприклад, height: 100%працює лише в тому випадку, якщо батьківський елемент має визначену висоту. Звичайно, є деякі випадки, коли батьківський елемент елемента не має визначеної висоти, а відсоткові одиниці огляду перегляду вирішують це. Іншими словами, якби у вас був глибоко вкладений елемент, ви могли б просто встановити 100vh, і він матиме висоту 100%браузера. Ви можете не бачити жодних переваг, але я був у численних випадках, коли вони були єдиним рішенням. Ці одиниці можуть бути не такі корисні для кореневих елементів, як html/ body, але, тим не менш, це альтернатива

— Джош Крозьє

2

Але ми говоримо про стихію тіла, а не про глибоко вкладений елемент. Є лише один можливий батько - елемент html. Ось чому я згадав, що не бачу ніякої користі, і це можливо гірше, ніж просто встановити 100%. Ваш коментар не говорить нічого, щоб змусити мене худіти інакше. Просто те, що щось нове, не робить це кращим. Однак це альтернатива.

— Роберт пішов

4

Проблема такого підходу полягає в тому, що iPhones виключає адресний рядок та нижню навігацію з висоти перегляду, а значить, 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

Було б чудове виправлення, якби я не використовував флексбокс для створення свого макета. : /

— Landon Call

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

Чому навіть робити щось подібне і ускладнювати це більше, ніж має бути? Я не розумію деяких відповідей, хале ...

— CapturedTree

1

У джерелі сторінки я бачу таке:

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

Якщо ви помістите значення висоти в тег, воно використовуватиме це замість висоти, визначеної у файлі css.

— Стівен
джерело

Це дивно, тому що це я бачу у джерелі сторінки: <div class = "owner"> <tr> <td> <div id = "s7"> <div id = "posts">

— граф Ларсон

Гаразд, поки я не знаю, як ви отримали свій вищезгаданий код, я зайшов і змінив <div id = "s7"> на <div id = "s7" style = "висота: 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
джерело