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


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

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

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


1685
2017-10-15 21:18


походження


Нехай ви знайдете це питання корисним stackoverflow.com/questions/1366548/... - Ivan Nevostruev
Хороший спосіб піти, але вузли VH, VW і т.д., як відомо, є баггі. Там цей легкий JS альтернатива, якщо вам це потрібно: joaocunha.github.io/vunit - see sharper
Ось просте та чітке пояснення CSS height майно з процентними значеннями: stackoverflow.com/a/31728799/3597276 - Michael_B


Відповіді:


Є пара вимірювальних одиниць CSS3, які називаються:

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

Що таке Процентний Процентний Довжини?

З пов'язаної вище Рекомендації про кандидатури W3:

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

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

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

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

HTML

<div></div>

CSS

div {
    height:100vh;
}

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

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

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

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

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

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

Візьміть, наприклад, такий макет:

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

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


2371
2018-05-30 13:33



Дуже сумно, що я, здається, не використовую це в поєднанні з calc (). Як якщо мій елемент має кордони height: calc(100vh - 2px); - Langdon
Дивна поведінка при прокручуванні, коли елемент насправді вище, ніж вікно перегляду. Контейнер підтримує висоту перегляду, а вміст витікає з контейнера. min-height:100vh здається, працюють навколо цього. - wdm
@ DGDD це працює на iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 і IEMobile 10.0. Я не знаю, який мобільний браузер ви маєте на увазі, але ці 4 складають понад 90% використовуваних мобільних веб-переглядачів. Це питання не визначає вимоги щодо роботи на мобільних веб-переглядачах. - James Donnelly
@ robross0606 знову це не питання я тут відповів. Це інше питання взагалі, чия відповідь дійсно використовує flexbox: stackoverflow.com/questions/90178/... - James Donnelly
VH не працює на всіх мобільних пристроях, оскільки я можу протестувати - Daniel Rodriguez


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

Ось приклад:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

522
2017-12-11 13:10



Це не працює в IE 8. - TreK
Виправте мене, якщо я помиляюсь, але я думаю, вам також потрібно встановити висоту для всіх батьків div, щоб фактично працювати - Dany Y
Це не дивно. Це дуже сумно. (мова не про HTML, а про відповідь) - Den
Це не спрацює, якщо я використовую постійний дизайн: висота сторінок 6000 пікселів, з блоками, що представляють сторінки. Я хочу, щоб один блок був саме висоти вікна перегляду. - Qwerty
@ 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


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

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

зробить це.


242
2017-10-15 21:31



Це працює, витягуючи елемент із потоку документів і закріплюючи його нижню величину до висоти свого батька. Це не ідеально підходить, коли ваш вміст перевищує висоту свого батька. - Ricky Boyce
Я спробував це, це здорово, але тоді з абсолютним позиціонуванням, ви не можете по центру горизонтально з полем- [left | right]: auto - Petruza
Це чудове рішення. Одного разу коментар, так само, як і #Petruza, у мене виникли проблеми з маржею ліворуч і праворуч, і я закінчив додати наступне: body {color: # 004A6E; посада: абсолютна; верх: 0; дно: 0; ліворуч: 0; праворуч: 0; } - Kremena Lalova
Це не спрацьовує, коли хтось із його батьків встановлений position:relative і його висота не становить 100% видимості. Він буде коригувати вершину та нижню частину до наступного відносного або абсолютного предка. - Seika85
Спасибі вам, що це працює краще, ніж розповідати тілу і html, щоб зайняти висоту 100% - dave o grady


Ви можете використовувати блок перегляду в 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*/
}

129
2018-05-04 11:11



Як це працює з прокладкою? коли я додаю пробіл до # my-div, він стає більше, ніж порт перегляду. - Lamar
@ Ламар Ви повинні використовувати * { box-sizing: border-box; } щоб цього не сталося. - Luca Steeb
Варіант перевірки можна використовувати для підтримки браузера в блоках viewport: caniuse.com/#feat=viewport-units - Dave Everitt
добре працює у всіх браузерах навіть у ie9, здається - luky
Це не працює в iOS Safari, що робить vh суттєво марним, бачачи, як Apple не має наміру його прийняти. - 3Dom


Всі інші рішення, включаючи топ-голосування з vh є менш оптимальними в порівнянні з flex модель рішення

З появою CSS flex model, вирішуючи 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>

Дізнайтеся більше про flex модель тут


86
2018-06-12 14:14



слово попередження: коли зміст одного з контейнерів ліворуч / праворуч перевищує оригінальний висоту тіла, протилежний контейнер не змінюватиметься, тому контейнери матимуть різну висоту. - schellmax
Приклад проблеми Schellmax вказує на: jsfiddle.net/Arete/b4g0o3pq - Arete


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

  • Чи фіксована ширина ширини?
  • Чи є одна або обидва стовпці фіксованою шириною?

Ось одна можливість:

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>

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


48
2017-10-15 23:13





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

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

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

How to make a div 100% height of the browser window?

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

.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>


41
2018-06-03 17:43



і що станеться, якщо ваш вміст перевищує 100% ширини і висоти, скажімо, таблиця з 100 стовпчиками та 1000 рядками - PirateApp


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

У вашому 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'});
    }
});

26
2017-08-21 16:57





Це все для мене:

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

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


25
2017-07-27 16:18



Це ідеально, якщо ви хочете охопити всю сторінку за межами початкового вікна перегляду. Гарна відповідь! - Kinburn101


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

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

14
2017-12-10 21:34