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

avatar
mike
15 октября 2009 в 21:18
2294879
38
2379

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

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

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

Источник
Ivan Nevostruev
15 октября 2009 в 21:20
8

Возможно, этот вопрос окажется для вас полезным coderhelper.com/questions/1366548/…

see sharper
1 июня 2015 в 02:57
0

Хороший способ пойти, но, как известно, устройства vh, vw и т. Д. Содержат ошибки. Если вам нужна легкая альтернатива js: joaocunha.github.io/vunit

Michael Benjamin
25 августа 2015 в 21:22
0

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

Vishnu Chauhan
4 сентября 2018 в 05:16
8

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

Mahen
20 июля 2021 в 11:58
0

Попробуйте использовать эту минимальную высоту: 100vh

Ответы (38)

avatar
Sunderam Dubey
3 февраля 2022 в 12:34
1

если вы установите html и высоту основного текста на 100%, то он будет покрывать всю страницу и если вы установите минимальную высоту какого-либо конкретного div на 100%, чтобы она покрывала все окно следующим образом:

CSS

html,body{
 height:100%;
}

div#some-div{
min-height:100%;

}

ПОМНИТЬ

Это будет работать только в том случае, если прямым родителем div является тело, так как процент всегда наследуется от прямого родителя, и, выполняя приведенный выше код css, вы сообщаете div, который наследует высоту 100% от прямого родителя (тела) и делает его вашим минимумом -высота: 100%

Другой способ

просто поместите высоту div в 100vh, это средняя высота 100 видового экрана

CSS

div#some-div{
 height:100vh

}
avatar
Priya Maheshwari
16 августа 2021 в 06:34
0

Теперь используйте высоту: 100vh; для фиксированного окна Высота

<style>
 .header-top{height:100vh; background:#000; color:#fff;display:flex;align-items:center;padding:10px; justify-content: space-around;}
 .header-top ul{list-style:none;padding:0; margin:0;display:flex;align-items:center;  }
 .header-top ul li{padding:0px 10px;}
</style>
   <div class="header-top">
       <div class="logo">Hello</div>
       <ul>
          <li>Menu</li>
          <li>About Us</li>
         <li>Contact US</li>
         <li>Login</li>
     </ul>
  </div>
avatar
WebDevLearner
19 марта 2021 в 12:14
11

Полная страница называется окном просмотра , и вы можете спроектировать элемент в соответствии с его окном просмотра в CSS3.

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

  • Высота области просмотра называется vh. Полная высота страницы составляет 100vh.
  • Ширина области просмотра называется vw. Полная высота страницы составляет 100vw.
  • Также существуют vmin (минимальная длина области просмотра) и vmax (область просмотра максимальная длина).

Итак, теперь ваша проблема может быть легко решена путем добавления следующего в ваш CSS:

.classname-for-right-div /*You could also use an ID*/ { 
  height: 100vh;
}

Вот информация об относительной длине области просмотра

avatar
machineghost
12 марта 2020 в 20:10
29

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

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

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}
Mark Jackson
27 марта 2020 в 04:17
2

У меня есть панель навигации с фиксированной высотой 90 пикселей, поэтому мне просто пришлось изменить ваш «100vh» на «calc (100vh - 90px)»

avatar
youcantryreachingme
24 февраля 2020 в 02:30
-1

Глупо простое решение , которое поддерживает междоменный , а также поддерживает изменение размера браузера .

<div style="height: 100vh;">
   <iframe src="..." width="100%" height="80%"></iframe>
</div>

Настройте свойство iframe height как требуется (оставьте свойство div height на 100vh).

Почему 80%? В моем реальном сценарии у меня есть заголовок внутри div перед iframe, который занимает некоторое вертикальное пространство, поэтому я установил для iframe использование 80% вместо 100% (в противном случае это была бы высота содержащего div, но начинаются после заголовка и выходят за нижнюю часть div).

avatar
EMILO
8 января 2020 в 18:44
16

Самый простой способ сделать это вот так.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}
<div></div>
avatar
Sunil R.
3 декабря 2019 в 11:21
7

Попробуйте один раз ...

*{
  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>
avatar
Dinesh Pandiyan
18 ноября 2018 в 17:36
25

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

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

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

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

body {
  min-height: 100vh;
}
avatar
mohammad nazari
7 сентября 2018 в 20:08
1

Вы можете использовать следующий CSS, чтобы сделать div 100% высоты окна браузера:

display: block;
position: relative;
bottom: 0;
height: 100%;
avatar
JimmyFlash
22 августа 2018 в 10:48
6

На самом деле мне больше всего сработало использование свойства 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);
}
Neek
15 июня 2019 в 14:28
0

Кстати, вы упоминаете «закругленные углы», влияющие на высоту вашего элемента, я ожидаю, что установка box-sizing: border-box; преодолеет это, это означает, что размер границы также учитывается при вычислении размера (ширины и высоты) элемента. .

avatar
Rudra
22 мая 2018 в 05:02
3

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

Необходимо настроить только height:100%.

html,body {
  height: 100%;
  margin: 0;
}
.content {
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content-left {
  height: auto;
  min-height: 100%;
  float: left;
  background: #ddd;
  width: 50%;
  position: relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll  #aaa;
  width: 50%;
  position: relative;
  float: left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width: 50%;
  float: left;
  position: relative;
  overflow-y: scroll;
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>
avatar
RamNiwas Sharma
30 апреля 2018 в 11:02
5

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 100vh; // Height window (vh)
}
.wrapper .left{
  width: 80%; // Width optional, but recommended
}
.wrapper .right{
  width: 20%; // Width optional, but recommended
  background-color: #dd1f26;
}
<!-- 
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>
Peter Mortensen
8 июля 2019 в 23:46
1

Возможная орфографическая ошибка: widht (ближе к концу)

avatar
khalifeh
10 марта 2018 в 00:52
8

Просто используйте единицу «vh» вместо «px», что означает высоту порта просмотра.

height: 100vh;
avatar
Thuc Nguyen
29 октября 2017 в 06:55
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>
TylerH
3 января 2018 в 18:02
0

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

avatar
Michael Benjamin
3 октября 2017 в 13:46
8

По умолчанию блочные элементы занимают всю ширину своего родительского элемента.

Таким образом они соответствуют своему конструктивному требованию, а именно вертикальному штабелированию.

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>
avatar
Руслан
27 сентября 2017 в 14:06
24

100vw = 100% ширины области просмотра.

100vh = 100% высоты области просмотра.

Если вы хотите установить ширину или высоту div на 100% от размера окна браузера, вы должны использовать:

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

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

Или, если вы хотите установить меньший размер, используйте функцию CSS calc. Пример:

#example {
    width: calc(100vw - 32px)
}
avatar
newdark-it
12 июня 2017 в 14:52
8

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

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/

avatar
Alireza
3 июня 2017 в 17:43
141

Вы можете использовать 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>
Learner
19 ноября 2019 в 05:57
2

Назначение 100vh добавило вертикальную прокрутку для страницы, поэтому следовало этому, но не сработало. coderhelper.com/questions/44645465/…. Есть ли способ избежать вертикальной прокрутки и касания div без какого-либо содержимого?

Legends
12 декабря 2019 в 15:41
0

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

Learner
13 декабря 2019 в 06:44
0

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

Legends
13 декабря 2019 в 08:35
2

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

avatar
ProblemChild
18 апреля 2017 в 05:56
5

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

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
avatar
Santosh Khalse
4 января 2017 в 10:43
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>
avatar
MrGeek
4 мая 2016 в 11:11
146

Вы можете использовать модуль порта просмотра в 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 */
}
Luca Steeb
22 января 2017 в 20:01
2

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

Dave Everitt
15 февраля 2017 в 17:32
2

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

avatar
Mohammed Javed
14 апреля 2016 в 10:19
11

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

html, 
body {
    height: 100%;
}

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

avatar
Stickers
25 января 2016 в 17:36
7

Один из вариантов - использование таблицы 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>
avatar
Prabhakar Undurthi
16 октября 2015 в 10:28
5

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

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

Источник

avalanche1
4 февраля 2016 в 10:09
3

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

Alexander Kim
23 мая 2019 в 16:51
2

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

avatar
robross0606
6 мая 2015 в 21:16
6

Использовать FlexBox CSS

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

avatar
Tony Smith
18 апреля 2014 в 19:37
0

Самый простой:

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>
Dan Dascalescu
6 ноября 2014 в 19:43
1

Довольно сложный. Современное решение - использовать гораздо более простую модель гибкого бокса CSS.

WebDevLearner
22 марта 2021 в 11:12
1

@DanDascalescu нет необходимости использовать flexbox. height:100vh; в CSS вполне достаточно.

avatar
John Smith Optional
12 сентября 2013 в 09:41
1

Если вы используете position: absolute; и jQuery, вы можете использовать

$("#mydiv").css("height", $(document).height() + "px");
Dan Dascalescu
6 ноября 2014 в 19:42
1

Нет необходимости в JavaScript. Современное решение - использовать модель гибкого бокса CSS.

user1493948
9 мая 2016 в 15:27
0

Если вы используете JS, я счел это весьма полезным. ПРИМЕЧАНИЕ: лучше всего использовать это с $ (window) .load (), так как вы получите разные результаты, возвращаемые с помощью F5 или CTRL + F5. Проверьте эту ссылку для получения дополнительной информации. coderhelper.com/questions/13314058/…

avatar
Jonas Sandstedt
21 августа 2013 в 16:57
30

Вот исправление высоты.

В 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'});
    }
});
avatar
Majda
27 июля 2013 в 16:18
36

Вот что у меня сработало:

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

Используйте position:fixed вместо position:absolute, в этом случае даже при прокрутке вниз раздел будет расширяться до конца экрана.

Mannyfatboy
24 февраля 2020 в 11:23
0

Этот код с «position: [fixed | absolute]» отлично подходит для фона всплывающих окон (например, когда вы щелкаете, чтобы увеличить изображение), но не так надежен в тех случаях, когда вам действительно нужно прокрутить вниз. Еще полезное тесто!

avatar
Airen
12 июня 2013 в 14:14
114

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

С появлением гибкой модели CSS решение проблемы 100% высоты стало очень и очень простым: используйте height: 100%; display: flex для родительских элементов и flex: 1 для дочерних элементов. Они автоматически займут все доступное пространство в своем контейнере.

Обратите внимание на простоту разметки и CSS. Никаких взломов таблиц или чего-то подобного.

Гибкая модель поддерживается всеми основными браузерами, а также 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>

Подробнее о гибкой модели см. Здесь.

schellmax
14 декабря 2015 в 07:55
4

Предупреждение: когда содержимое одного из левого / правого контейнеров превышает исходную высоту тела, размер противоположного контейнера не будет изменен, поэтому контейнеры будут иметь разную высоту.

Arete
12 сентября 2016 в 20:15
1

Пример проблемы, на которую указывает Шеллмакс: jsfiddle.net/Arete/b4g0o3pq

Evi Song
8 сентября 2018 в 08:54
0

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

avatar
testing
12 июня 2013 в 14:01
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 */
}

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

avatar
James Donnelly
30 мая 2013 в 13:33
3058

Есть пара единиц измерения 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, чтобы легко увидеть разницу!

wdm
18 августа 2013 в 09:07
44

Странное поведение при прокрутке, когда элемент на самом деле выше области просмотра. Контейнер поддерживает высоту области просмотра, и содержимое вытекает из контейнера. min-height:100vh, похоже, помогает обойти это.

DGDD
4 июля 2014 в 15:41
0

Viewport-Percentage не имеет достаточной поддержки для использования в производственной среде. Вы должны каждый раз писать резервный вариант, который в конечном итоге создает больше беспорядка, чем если бы вы просто не использовали VP.

James Donnelly
4 июля 2014 в 15:49
1

@DGDD продолжает: здесь есть много других решений, которые работают еще в IE5, поэтому мне не нужно было повторять то, что уже сказали другие. Этот ответ достаточно надежен для большинства браузеров, выпущенных за последние 3 года с момента появления спецификации.

DGDD
4 июля 2014 в 15:54
0

На самом деле я имел в виду мобильные телефоны, на которых не поддерживаются VP. Учитывая количество пользователей, которые используют мобильные телефоны (30% +), я думаю, что игнорирование более трети пользователей может считаться нефункциональным ответом.

James Donnelly
4 июля 2014 в 15:56
9

@DGDD, это работает в iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 и IEMobile 10.0. Я не знаю, какой мобильный браузер вы имеете в виду, но эти 4 составляют более 90% используемых мобильных браузеров. В этом вопросе не указаны требования для работы в мобильных браузерах.

robross0606
6 мая 2015 в 21:12
0

Хорошо, но ответ по-прежнему очень близорукий и работает только в крайне ограниченных ситуациях. CSS Flexbox (philipwalton.github.io/solved-by-flexbox/demos/sticky-footer) покроет этот и другие ответы.

James Donnelly
6 мая 2015 в 21:14
1

@ robross0606 опять же, это не тот вопрос, на который я здесь ответил. Это совсем другой вопрос, ответ на который действительно использует flexbox: coderhelper.com/questions/90178/…

webmak10
29 сентября 2015 в 14:54
0

вам нужно увидеть этот caniuse.com/#feat=viewport-units и затем принять решение

James Donnelly
28 апреля 2017 в 08:20
0

@DanielRodriguez согласно Могу ли я использовать ..., он работает во всех современных мобильных браузерах, кроме Opera Mini.

thSoft
12 мая 2017 в 14:27
0

Вы также должны установить body { margin: 0 }, потому что даже в случае box-sizing: border-box маржа не включается в измерение.

user5147563
1 сентября 2017 в 07:25
0

VH не соответствует высоте окна браузера. Это высота области просмотра.

James Donnelly
1 сентября 2017 в 07:47
0

@Soaku высота области просмотра равна высоте области (области просмотра), в которой веб-сайт отображается в веб-браузере. Это то, что я имел в виду под «высотой окна браузера» в более простых терминах.

user5147563
1 сентября 2017 в 07:49
1

@JamesDonnelly Да, я знаю. Но это не ответ на этот вопрос. Высота окна браузера включает высоту навигационной панели. Это было бы лучше, потому что в мобильных браузерах высота области просмотра изменяется каждый раз, когда панель навигации отображается / скрывается.

Offirmo
22 февраля 2018 в 06:46
5

Мобильное оповещение: использование vh mess с мобильным устройством Chrome, которое не принимает во внимание его навигационную панель. Затем он накроет им верхнюю часть вашей страницы. Серьезная проблема, если у вас там есть меню ...

chimos
12 июля 2018 в 13:23
1

@Langdon, использование box-sizing: border-box поможет избежать включения border и paddings в height и width. О размере коробки

Divakar Rajesh
19 октября 2018 в 05:45
1

Святой Грааль! Вы спасли мне день .. Я пытался применить градиент ко всему фону, и увидел разделение на определенной высоте. После установки высоты на 100vh он отлично выглядит

Mentalist
11 апреля 2019 в 09:12
0

Невероятно полезно! Позвольте мне отказаться от многих строк JS и легко создать заголовок с минимальной высотой для мобильных устройств, максимальной высотой для настольных компьютеров и автоматической регулировкой диапазона высот между ними для планшетов, и все это с помощью всего лишь нескольких простых объявлений: #header {height: 20vw; min-height: 64px; max-height: 128px; transition: 0.4s;}

Martin
7 июня 2021 в 16:58
0

Вау, я уже давно не участвую в игре с интерфейсом пользователя. Я не понимал, что vh было чем-то. Это делает его намного проще, чем те хаки, которые использовались в свое время.

avatar
zurfyx
30 апреля 2013 в 14:14
-2

Несмотря на то, что это решение реализовано с помощью jQuery I, оно может быть полезно для тех, кто создает столбцы, соответствующие размеру экрана.

Для столбцов, начинающихся вверху страницы, это решение является наиболее простым.

body,html{
  height:100%;
}

div#right{
  height:100%
}

Для столбцов, которые не , начиная с верхней части страницы (например: если они начинаются под заголовком).

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

Первый метод применяет высоту тела к нему и столбцам, что означает, что это start_pixels + height100%.

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

Rob
20 мая 2013 в 15:33
0

Я внес некоторые правки, но это отличный способ сделать div равным размеру окна и хорошо работающим динамически. 100% будет отображаться только один раз, поэтому несколько экранов не работают. Я бы также добавил $ (window) .resize (function () {. Он выглядит так же, за вычетом того, что я добавил.

Dan Dascalescu
6 ноября 2014 в 19:43
3

Нет необходимости в JavaScript. Современное решение - использовать гораздо более простую модель гибкого бокса CSS.

FranSanchis
7 июля 2020 в 10:26
0

Добавление внешней библиотеки, такой как JQuery, для решения проблемы 100% CSS бесполезно, также тот же скрипт может быть выполнен на простом javascript.

avatar
lukaszkups
28 января 2013 в 11:05
25

Попробуйте это - протестировано:

body {
  min-height: 100%;
}

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

Изменить: обновление 2020:

Теперь вы можете использовать vh:

#right, #left {
  height: 100vh
}
avatar
Ariona Rian
11 декабря 2011 в 13:10
592

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

Вот пример:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
Dany Y
28 марта 2013 в 11:05
119

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

Qwerty
21 декабря 2013 в 20:31
0

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

toto_tico
2 января 2014 в 07:31
0

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

Ariona Rian
19 февраля 2014 в 06:00
0

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

cameronjonesweb
12 марта 2014 в 11:55
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% }

avatar
Remus Simion
10 декабря 2011 в 21:34
16

Добавьте min-height: 100% и не указывайте высоту (или установите автоматический режим). Это полностью помогло мне:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
avatar
cletus
15 октября 2009 в 23:13
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>

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

avatar
Tinister
15 октября 2009 в 21:31
296

Если вы можете позиционировать элементы абсолютно,

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

сделает это.

Ricky Boyce
18 декабря 2014 в 04:23
19

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

Seika85
1 июля 2016 в 14:39
2

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