Як зробити діву на 100% висоту вікна браузера


2137

У мене макет з двома стовпцями - лівою divта правою div.

Справа divмає сірий колір background-color, і мені потрібно, щоб він розширювався вертикально залежно від висоти вікна браузера користувача. Зараз background-colorзакінчується останній вміст цього div.

Я пробував height:100%, min-height:100%;і т.д.


7
Може ви знайдете це питання корисну stackoverflow.com/questions/1366548 / ...
Іван Невоструев

Хороший шлях, але vh, vw тощо одиниці, як відомо, баггі. Ось ця легка альтернатива js, якщо вона вам потрібна: joaocunha.github.io/vunit
дивіться чіткіше

Ось просте і зрозуміле пояснення властивості CSS heightз відсотковими значеннями: stackoverflow.com/a/31728799/3597276
Michael Benjamin,

4
можна використовувати висоту: 100vh; css property
Vishnu Chauhan

Відповіді:


2831

Існує пара одиниць вимірювання CSS 3 під назвою:

ВЕкран-відсотки (або ВЕкран-Відносні) Довжини

Що таке тривалість перегляду в процентному відношенні?

Із наведеної вище рекомендації щодо кандидата W3:

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

Такими одиницями є vh(висота вікна перегляду), vw(ширина вікна перегляду), vmin(мінімальна довжина вікна перегляду) та vmax(максимальна довжина вікна перегляду).

Як це можна використовувати, щоб роздільник заповнив висоту браузера?

Для цього питання ми можемо скористатися vh: 1vhдорівнює 1% висоти вікна перегляду. Тобто 100vhдорівнює висоті вікна браузера, незалежно від того, де елемент знаходиться у дереві DOM:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

Це буквально все, що потрібно. Ось приклад використання цього JSFiddle .

Які браузери підтримують ці нові блоки?

Наразі це підтримується у всіх сучасних основних браузерах, крім Opera Mini. Перевірте Чи можна використовувати ... для подальшої підтримки.

Як це можна використовувати з кількома стовпцями?

У випадку порушеного питання, що містить лівий і правий роздільник, ось приклад JSFiddle, що показує макет з двома стовпцями, що включає обидва vhта vw.

Як 100vhвідрізняється 100%?

Візьмемо для прикладу цей макет:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

pТег тут встановлений на 100% висоти, а тому , що вона містить divмає висоту 200 пікселів, 100% 200 пікселів стає 200 пікселів, а НЕ 100% від bodyвисоти. Використання 100vhнатомість означає, що pтег становитиме 100% висоту bodyнезалежно від divвисоти. Погляньте на цей супровідний JSFiddle, щоб легко побачити різницю!


35
Дивна поведінка при прокручуванні, коли елемент насправді вище, ніж вікно перегляду. Контейнер підтримує висоту вікна перегляду, і вміст витікає з контейнера. min-height:100vhсхоже, це обійдеться.
wdm

8
@DGDD це працює на iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 та IEMobile 10.0. Я не знаю, на який мобільний браузер ви звертаєтесь, але ці 4 складають понад 90% використовуваних мобільних браузерів. Це запитання не визначає вимоги щодо роботи з мобільними браузерами.
Джеймс Доннеллі

1
@ robross0606 знову це не питання, на яке я тут відповів. Це інше питання , в цілому, відповідь на який робить дійсно використовувати Flexbox: stackoverflow.com/questions/90178 / ...
Джеймс Доннеллі

1
@JamesDonnelly Так, я знаю. Але це не відповідь на це питання. Висота вікна веб-переглядача включає висоту навбара. Це було б краще, тому що в мобільних браузерах висота вікна перегляду змінюється щоразу, коли навбар відображається / ховається.
RedClover

3
Попередження для мобільних пристроїв: використання vh mess з мобільним Chrome, який не враховує його навігаційну панель. Потім він покриває верхню частину вашої сторінки. Серйозне питання, якщо у вас є меню там ...
Offirmo

567

Якщо ви хочете встановити висоту <div>або будь-якого елемента, вам слід також встановити висоту <body>та <html>100%. Тоді ви можете встановити висоту елемента на 100% :)

Ось приклад:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

109
Виправте мене, якщо я помиляюся, але я думаю, вам також потрібно встановити висоту всім батькам діва, щоб насправді працювати
Dany Y

Це не спрацює, якщо я використовую дизайн, що триває: висота сторінки 6000px, з блоками, що представляють сторінки. Я хочу, щоб один блок був саме висотою вікна перегляду.
Qwerty

@DanyY, ти маєш рацію. Вам потрібно встановити висоту всім батькам діви, маючи на увазі все, що має висоту екрана. Ось приклад .
toto_tico

Цей трюк працює в деяких випадках, але це не буде також для деяких випадків. Якщо ви шукаєте сумісність або більш рекомендований спосіб, ви можете переглянути @ відповідь Джеймса вище :) Використовуючи метод перегляду відсотків Viewport :), це теж має працювати. ура
Аріона Ріан

8
@Qwerty, ось рішення. Набір CSS , як так: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Тож якщо у вас є 3 розділи, це будеhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }
cameronjonesweb

283

Якщо ви можете абсолютно розташувати свої елементи,

position: absolute;
top: 0;
bottom: 0;

зробив би це.


16
Це працює, виймаючи елемент із документообігу та цементуючи його нижнє значення на висоту його початкового елемента. Це не ідеально, коли ваш вміст перевищує висоту батьківського рівня.
Ріккі Бойс

1
Це не спрацьовує, якщо один з батьків встановлений, position:relativeа його висота не становить 100% від огляду. Він буде коригувати верх і низ відповідно до наступного родича чи абсолютного предка.
Seika85

141

Ви можете використовувати блок порту перегляду в CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}

1
@Lamar Ви повинні використовувати, * { box-sizing: border-box; }щоб не допустити цього.
Лука Стіб

2
Варто перевірити канюзу на підтримку браузера на оглядових одиницях: caniuse.com/#feat=viewport-units
Дейв Еверітт

132

Ви можете використовувати vhв цьому випадку відносно 1% висоти вікна перегляду ...

Це означає, що якщо ви хочете прикрити висоту, просто використовуйте 100vh.

Подивіться на зображення, яке я малюю для вас тут:

Як зробити діву на 100% висоту вікна браузера?

Спробуйте фрагмент, який я створив для вас, як показано нижче:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>


Давши 100vh додав вертикальну прокрутку сторінки, тому слідкував за цим, але не працював. stackoverflow.com/questions/44645465/… . Чи є спосіб уникнути вертикальної прокрутки і дів торкнутися дна без вмісту?
DILEEP THOMAS

@DILEEPTHOMAS шукати існуючіpaddings/margins
Легенди

@Legends у кореневому файлі я спробував дати як * {margin: 0, padding: 0}, але не працював
DILEEP THOMAS

1
@DILEEPTHOMAS погляньте на цей приклад, наданий Алірезою, він також має смугу прокрутки, оскільки елемент тіла має поле. Якщо ви видалите поле, панель прокрутки відпала. У неї можуть бути різні причини, але я б спочатку перевірив цю.
Легенди

101

Усі інші рішення, включаючи найголовніші, з них vhє неоптимальними порівняно з рішенням гнучкої моделі .

З появою моделі CSS flex , вирішення проблеми на 100% висоти стає дуже, дуже просто: використовувати height: 100%; display: flexна батьківських та flex: 1на дочірніх елементах. Вони автоматично займуть усі наявні місця в контейнері.

Зауважте, наскільки проста розмітка та CSS. Ніяких хакерських наборів або нічого.

Модель flex підтримується всіма основними браузерами , а також IE11 +.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

Докладніше про флекс-модель тут.


3
слово попередження: коли вміст одного з лівих / правих контейнерів перевищує початкову висоту корпусу, протилежний контейнер не буде змінено, тому контейнери закінчуються різною висотою.
schellmax

1
Приклад проблеми, на який вказує Schellmax
Arete

Залежно від конструкції, overflow-y: auto;може уникати "контейнер перевищує початковий зріст кузова".
Пісня Evi

54

Ви не згадуєте декілька важливих деталей, таких як:

  • Чи макет фіксованої ширини?
  • Чи однаковий або обидва стовпці мають фіксовану ширину?

Ось одна з можливостей:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Залежно від цього існує багато варіацій залежно від того, які стовпці потрібно зафіксувати, а які - рідкі. Ви можете це зробити і з абсолютним позиціонуванням, але я, як правило, знайшов кращі результати (особливо щодо перехресного веб-переглядача), використовуючи замість плавців.


34

Це для мене працювало:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

Використовуйте position:fixedзамість цього position:absolute, навіть якщо ви прокрутите вниз, розділ розшириться до кінця екрана.


Цей код із "позицією: [фіксований | абсолютний]" відмінно підходить для фонів спливаючих вікон (наприклад, коли ви натискаєте, щоб збільшити зображення), але не настільки впевнений у випадках, коли вам потрібно насправді прокрутити вниз. Ще корисне тісто!
Mannyfatboy

29

Ось виправлення висоти.

У використанні CSS:

#your-object: height: 100vh;

Для браузера, який не підтримує vh-units, використовуйте modernizr.

Додайте цей скрипт (щоб додати виявлення для vh-units)

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

Нарешті, використовуйте цю функцію, щоб додати висоту вікна перегляду, #your-objectякщо браузер не підтримує vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

23

100% працює по-різному для ширини та висоти.

Коли ви вказуєте width: 100%, це означає "зайняти 100% доступної ширини від батьківського елемента або ширини вікна".

Коли ви вказуєте height: 100%, це означає лише "зайняти 100% доступної висоти від батьківського елемента". Це означає, що якщо ви не вказуєте висоту в елементі верхнього рівня, висота всіх дітей буде 0або висота батьків, і тому вам потрібно встановити верхній елемент, щоб матиmin-height висоту вікна.

Я завжди вказую, що корпус має висоту мінімум 100 Вт, і це робить позиціонування та розрахунки легкими,

body {
  min-height: 100vh;
}

16

Додайте min-height: 100%та не вказуйте висоту (або ставити її автоматично). Це повністю зробило роботу для мене:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

16

100vw === 100% ширини вікна перегляду.

100vh === 100% висоти вікна перегляду.

Якщо ви хочете встановити div ширину або висоту 100% розміру вікна браузера, ви повинні використовувати:

Для ширини: 100vw

Для висоти: 100vh

Або якщо ви хочете встановити його меншого розміру, скористайтеся calcфункцією CSS . Приклад:

#example {
    width: calc(100vw - 32px)
}

12

Існує кілька методів встановлення висоти <div>до 100%.

Спосіб (A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>

Метод (B) з використанням vh:

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>

Спосіб (c) з використанням флексу:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>


12

Це працювало для мене:

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

Зібрано з цієї сторінки .



11

Спробуйте встановити height:100%в html&body

html, 
body {
    height: 100%;
}

І якщо ви хочете, щоб 2 висоти ділилися однаково, використовуйте або встановіть display:flexвластивість батьківського елемента .


9

Навіть маючи всі відповіді тут, я здивовано виявив, що ніхто насправді не вирішив проблему. Якщо я використовував 100vh height/ min-height, макет зламався, коли вміст був довше сторінки. Якщо я замість цього використовував 100% height/ min-height, макет зламався, коли вміст був меншим за висоту сторінки.

Я знайшов рішення, яке вирішило обидва випадки, - поєднати дві найкращі відповіді:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

1
Я маю фіксовану висоту 90 пікселів навбар, тому мені просто довелося змінити ваш "100 ВГт" на "кальц (100vh - 90px)"
Марк Джексон,

8

Просто використовуйте блок "vh" замість "px", що означає висоту порту перегляду.

height: 100vh;

7

За замовчуванням елементи блоку споживають повну ширину свого батьківського елемента.

Ось так вони відповідають своїй вимозі до проектування, яка полягає в тому, щоб укладатися вертикально.

9.4.1 Блокування контекстів форматування блоків

У контексті форматування блоків поля розкладаються одна за одною, вертикально, починаючи вгорі блоку, що містить.

Однак така поведінка не поширюється на висоту.

За замовчуванням більшість елементів - це висота їх вмісту (height: auto ).

На відміну від ширини, вам потрібно вказати висоту, якщо ви хочете додаткового місця.

Тому пам’ятайте про ці дві речі:

  • якщо вам не потрібна повна ширина, вам потрібно визначити ширину блочного елемента
  • якщо ви не хочете висоти вмісту, вам потрібно визначити висоту елемента

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>


7

Ось щось не зовсім схоже на те, що ви мали у попередніх відповідях, але може бути корисним для деяких:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/


6

Використовуйте FlexBox CSS

Flexbox ідеально підходить для подібних проблем. Хоча в основному відомий тим, що викладає вміст у горизонтальному напрямку, Flexbox насправді працює так само добре, як і для проблем з вертикальним розташуванням. Все, що вам потрібно зробити, це загорнути вертикальні ділянки у гнучку ємність і вибрати, які саме потрібно розгорнути. Вони автоматично займуть усі наявні місця в контейнері.


6

Один з варіантів - використання таблиці CSS. Він має чудову підтримку браузера і навіть працює в Internet Explorer 8.

Приклад JSFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>


6

Спробуйте це - перевірено:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

Редагувати: оновлення до 2020 року:

Ви можете використовувати vhзараз:

#right, #left {
  height: 100vh
}

5

Ви можете використовувати display: flexіheight: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>


Уже розміщено декілька флешбокс-рішень, у тому числі одне з такою точною реалізацією розміщено лише за 26 днів до цієї відповіді.
TylerH

5

Вам потрібно зробити дві речі, одна - встановити висоту на 100%, що ви вже робили. По-друге, встановлюється абсолютна позиція. Це повинно зробити трюк.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Джерело


3
Застаріле рішення. Використовуйте vhзамість цього.
лавина1

1
Не використовуйте, vhякщо ви плануєте використовувати адаптивний дизайн на мобільних пристроях.
Олександр Кім


5

Насправді для мене найкраще працювало vhмайно.

У моїй програмі React я хотів, щоб div відповідав цій сторінці на високій сторінці навіть при зміні розміру. Я намагався height: 100%;, overflow-y: auto;але жоден з них не працював при налаштуванніheight:(your percent)vh; його працювали за призначенням.

Примітка: якщо ви використовуєте набивання, круглі кути тощо, обов'язково відніміть ці значення від vhвідсотка власності, або це додасть додаткову висоту і зробіть появу смуг прокрутки. Ось мій зразок:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
}

До речі, ви згадуєте "закруглені кути", що впливають на висоту вашого елемента, я думаю, що налаштування box-sizing: border-box;переможе це, це означає, що розмір межі також враховується при розрахунку розміру (ширини та висоти) елемента.
NEEK

5

Спробуйте це раз ...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}
<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>


3

Якщо ви використовуєте position: absolute;та jQuery, ви можете використовувати

$("#mydiv").css("height", $(document).height() + "px");

1
Немає необхідності в JavaScript. Сучасним рішенням є використання моделі CSS flex box .
Дан Даскалеску

Якщо ви використовуєте JS, я вважаю це дуже корисним. ПРИМІТКА: найкраще використовувати це з $ (window) .load (), оскільки ви отримаєте різні результати, що повертаються за допомогою F5 або CTRL + F5. Перевірте це посилання для отримання додаткової інформації. stackoverflow.com/questions/13314058/…
edward

2

HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

1
Можливі неправильні написання: widht(ближче до кінця)
Пітер Мортенсен
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.