2141

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

Справа divесть серый background-color, и мне нужно, чтобы он расширялся по вертикали в зависимости от высоты окна браузера пользователя. Сейчасbackground-color заканчивается последний кусок контента в этом div.

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

html css height Майк
источник

7

Можете ли вы найти этот вопрос полезным stackoverflow.com/questions/1366548/…

Иван Невоструев

Хороший способ, но единицы VH, VW и т.д., как известно, глючат. Есть такая легкая альтернатива js, если вам это нужно: joaocunha.github.io/vunit

см.

Вот простое и ясное объяснение heightсвойства CSS с процентными значениями: stackoverflow.com/a/31728799/3597276

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

4

Вы можете использовать высоту: 100vh; css property

Вишну Чаухан

2835

Существует несколько единиц измерения 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

568

Если вы хотите установить высоту элемента <div>или любого элемента, вы должны также установить высоту <body>и <html>на 100%. Тогда вы можете установить высоту элемента на 100% :)

Вот пример:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

Ариона Риан
источник

109

Поправьте меня, если я ошибаюсь, но я думаю, что вам также нужно установить рост для всех родителей div, чтобы на самом деле работать

Dany Y

Это не сработает, если я использую продолжение дизайна: высота страницы 6000px, с блоками, представляющими страницы. Я хочу, чтобы один блок точно соответствовал высоте окна просмотра.

Qwerty

@DanyY, ты прав. Вам нужно установить высоту для всех родителей div, с учетом всего, что имеет высоту экрана. Вот пример .

toto_tico

Этот прием работает в некоторых случаях, но не в некоторых случаях. Если вы ищете совместимость или более рекомендуемый способ, вы можете просмотреть ответ @ James выше :) Используя метод Viewport Percentage :), это тоже должно работать. ура

Ариона Риан

8

@ Quwerty, вот решение. Набор 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;

сделал бы это.

Tinister
источник

16

Это работает, вынимая элемент из потока документов и цементируя его нижнее значение до высоты его родителя. Это не идеально, когда ваш контент превышает высоту своего родителя.

Рикки Бойс

1

Это не работает, когда один из его родителей установлен в положение, position:relativeи его высота не равна 100% области просмотра. Он отрегулирует верх и низ к своему следующему относительному или абсолютному предку.

Seika85

141

Вы можете использовать модуль view-port в 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 */
}

MrGeek
источник

1

@ Lamar Вы должны использовать, * { box-sizing: border-box; }чтобы предотвратить это.

Лука Стиб

2

Стоит проверить caniuse для поддержки браузера на устройствах просмотра: caniuse.com/#feat=viewport-units

Дейв Эверитт

133

Вы можете использовать vhв этом случае, который составляет 1% от высоты области просмотра ...

Это означает, что если вы хотите скрыть высоту, просто используйте 100vh.

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

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

.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/… . Есть ли способ избежать вертикальной прокрутки и сделать так, чтобы div касался дна без какого-либо содержимого?

DILEEP THOMAS

@DILEEPTHOMAS искать существующиеpaddings/margins

Легенды

@ Легенды в корневом файле, который я пытался указать как * {margin: 0, padding: 0}, но не сработал

DILEEP THOMAS

1

@DILEEPTHOMAS посмотрите на этот пример, предоставленный Alireza, он также имеет полосу прокрутки, потому что элемент body имеет поле. Если вы удалите поле, полоса прокрутки исчезнет. У этого могут быть разные причины, но эту я хотел бы проверить первым.

Легенды

102

Все остальные решения, включая решение с наибольшим количеством голосов, vhявляются неоптимальными по сравнению с решением для гибкой модели .

С появлением гибкой модели CSS решение проблемы 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 указывает: jsfiddle.net/Arete/b4g0o3pq

Arete

В зависимости от конструкции, overflow-y: auto;можно избежать «контейнеров превышает исходную высоту тела».

Эви Сонг,

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, даже если вы прокрутите вниз, разделение расширится до конца экрана.

Majda
источник

Этот код с «position: [fixed | 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'});
    }
});

Йонас Сандстедт
источник

24

100% работает по-разному для ширины и высоты.

Когда вы указываете width: 100%, это означает «занять 100% доступной ширины от родительского элемента или ширины окна».

Когда вы указываете height: 100%, это означает только «получить 100% доступной высоты от родительского элемента». Это означает, что если вы не укажете высоту в элементе верхнего уровня, высота всех дочерних элементов будет равна 0или высоте родительского элемента, и поэтому вам нужно установить для верхнего элемента значение min-heightвысоты окна.

Я всегда указываю, чтобы тело имело минимальную высоту 100vh, и это облегчает позиционирование и вычисления,

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

Метод (А):

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>

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

Метод (с) с использованием гибкой коробки:

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 */
}

Взято с этой страницы .

тестирование
источник

12

Проще всего сделать это так.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

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

EMILO
источник

11

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

html, 
body {
    height: 100%;
}

И если вы хотите, чтобы высота 2 div одинакова, используйте или установите display:flexсвойство родительского элемента .

Мохаммед Джавед
источник

9

Даже со всеми ответами здесь, я был удивлен, обнаружив, что никто действительно не решил проблему. Если я использовал 100vh height/ min-height, макет сломался, когда содержание было длиннее страницы. Если бы я вместо этого использовал 100% height/ min-height, макет сломался, когда содержимое было меньше, чем высота страницы.

Решение, которое я нашел, которое решило оба случая, заключалось в объединении двух лучших ответов:

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

machineghost
источник

1

У меня есть панель навигации с фиксированной высотой 90px, поэтому мне просто нужно было изменить значение «100vh» на «calc (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/

newdark-он
источник

6

Используйте FlexBox CSS

Flexbox идеально подходит для решения подобных задач. Несмотря на то, что Flexbox в основном известен тем, что размещает контент в горизонтальном направлении, он на самом деле работает также и для задач вертикального размещения. Все, что вам нужно сделать, это обернуть вертикальные секции в гибкий контейнер и выбрать, какие из них вы хотите расширить. Они автоматически займут все доступное пространство в своем контейнере.

robross0606
источник

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
}

lukaszkups
источник

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>

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

Тхук Нгуен
источник

Уже опубликовано несколько решений Flexbox, в том числе одно с этой точной реализацией, опубликованное всего за 26 дней до ответа.

TylerH

5

Вам нужно сделать две вещи, одна из них - установить высоту на 100%, что вы уже сделали. Второе - установить абсолютное положение. Это должно делать свое дело.

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

Источник

Прабхакар Ундурти
источник

3

Устаревшее решение. Используйте vhвместо этого.

avalanche1

1

Не используйте, vhесли вы планируете использовать адаптивный дизайн на мобильных устройствах.

Александр Ким

5

Попробуйте следующий CSS:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

Проблемный ребенок
источник

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);
}

JimmyFlash
источник

Кстати, вы упомянули «закругленные углы», влияющие на высоту вашего элемента, я ожидаю, что настройка 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/…

Эдвард

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(ближе к концу)

Питер Мортенсен

Как сделать div на 100% высоты окна браузера

Ответы:

ВЭкран-проценты (или ВЭкран-Относительные) Длины

Что такое длина просмотра в процентах?

Как это можно использовать, чтобы разделитель заполнил всю высоту браузера?

HTML

CSS

Какие браузеры поддерживают эти новые модули?

Как это можно использовать с несколькими столбцами?

Чем `100vh`отличается от `100%`?

HTML

CSS

Как сделать div на 100% высоты окна браузера

Ответы:

ВЭкран-проценты (или ВЭкран-Относительные) Длины

Что такое длина просмотра в процентах?

Как это можно использовать, чтобы разделитель заполнил всю высоту браузера?

HTML

CSS

Какие браузеры поддерживают эти новые модули?

Как это можно использовать с несколькими столбцами?

Чем 100vhотличается от 100%?

HTML

CSS

Чем `100vh`отличается от `100%`?