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

<p>у меня есть макет с двумя столбцами - слева <code>div</code> и справа <code>div</code>.</p><p>право <code>div</code> имеет серый <code>background-color</code>, и мне нужно, чтобы он расширялся по вертикали в зависимости от высоты окна браузера пользователя. прямо сейчас <code>background-color</code> заканчивается на последнем фрагменте содержимого в этом <code>div</code>.</p><p>я пробовал <code>height:100%</code>, <code>min-height:100%;</code> и т.д.</p>

<p>есть несколько единиц измерения css3, которые называются:</p><h1> <a href="http://www.w3.org/tr/css3-values/#viewport-relative-lengths">viewport-percentage <em> (или viewport-relative) </em> lengths</a> </h1><h2>что такое длина просмотра в процентах?</h2><p>из приведенной выше рекомендации кандидата w3:</p><blockquote> <p><em> длина в процентах от области просмотра относительно размера исходного содержащего блока. когда высота или ширина исходного содержащего блока изменяется, они масштабируются соответственно. </em></p> </blockquote><p>этими единицами являются <code>vh</code> (высота области просмотра), <code>vw</code> (ширина области просмотра), <code>vmin</code> (минимальная длина области просмотра) и <code>vmax</code> (максимальная длина области просмотра).</p><h2>как это можно использовать, чтобы разделитель заполнил всю высоту браузера?</h2><p>для этого вопроса мы можем использовать <code>vh</code>: <code>1vh</code> равен 1% от высоты области просмотра. то есть, <code>100vh</code> равен высоте окна браузера, независимо от того, где находится элемент в дереве dom:</p><h3>html</h3><pre class="lang-html prettyprint-override"><code><div></div> </code></pre><h3>css</h3><pre class="lang-css prettyprint-override"><code>div { height:100vh; } </code></pre><p>это буквально все, что нужно. вот пример <a href="http://jsfiddle.net/jamesd/hr8sl/"><strong> jsfiddle </strong></a> этого в использовании.</p><h2>какие браузеры поддерживают эти новые модули?</h2><p>в настоящее время это поддерживается во всех современных основных браузерах, кроме opera mini. проверьте <a href="http://caniuse.com/#feat=viewport-units">могу ли я использовать ...</a> для дальнейшей поддержки.</p><h2>как это можно использовать с несколькими столбцами?</h2><p>в случае рассматриваемого вопроса с левым и правым разделителями приведен <a href="http://jsfiddle.net/jamesd/hr8sl/1/">пример jsfiddle</a> , показывающий макет из двух столбцов, включающий <code>vh</code> и <code>vw</code>.</p><h2>чем <code>100vh</code> отличается от <code>100%</code>?</h2><p>возьмите этот макет например:</p><pre class="lang-html prettyprint-override"><code><body style="height:100%"> <div style="height:200px"> <p style="height:100%; display:block;">hello, world!</p> </div> </body> </code></pre><p>тэг <code>p</code> здесь установлен на 100% высоты, но поскольку его содержащее <code>div</code> имеет высоту 200px, 100% от 200px становится 200px, <em> not </em> 100% от высоты <code>body</code>. использование вместо этого <code>100vh</code> означает, что тег <code>p</code> будет на 100% больше высоты <code>body</code> независимо от высоты <code>div</code>. взгляните на это <a href="http://jsfiddle.net/jamesd/hr8sl/2/">сопровождает jsfiddle</a> , чтобы легко увидеть разницу!</p>

<p>если вы хотите установить высоту <code><div></code> или любого другого элемента, вам также следует установить высоту <code><body></code> и <code><html></code> на 100%. тогда вы можете установить высоту элемента на 100% :)</p><p>вот пример:</p><pre class="lang-css prettyprint-override"><code>body, html { height: 100%; } #right { height: 100%; } </code></pre>

<p>если вы в состоянии абсолютно позиционировать свои элементы,</p><pre class="lang-css prettyprint-override"><code>position: absolute; top: 0; bottom: 0; </code></pre><p>сделал бы это.</p>

<p>вы можете использовать модуль view-port в css:<br> <br> <strong>html:</strong></p><pre><code><div id="my-div">hello world!</div> </code></pre><p><strong>css:</strong></p><pre><code>#my-div { height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/ } </code></pre>

<p>вы можете использовать <code>vh</code> в этом случае, который относительно <strong> 1% высоты </strong> области просмотра ...</p><p>это означает, что если вы хотите скрыть высоту, просто используйте <code>100vh</code>.</p><p>посмотрите на изображение, которое я рисую для вас здесь:</p><p> <a href="https://i.stack.imgur.com/g0kuu.jpg"><img src="https://i.stack.imgur.com/g0kuu.jpg" alt="how to make a div 100% height of the browser window?"></a> </p><p>попробуйте фрагмент, который я создал для вас, как показано ниже:</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.left { height: 100vh; width: 50%; background-color: grey; float: left; } .right { height: 100vh; width: 50%; background-color: red; float: right; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="left"></div> <div class="right"></div></code></pre></div> </div>

<p>все остальные решения, включая решение с наибольшим количеством голосов с <code>vh</code>, являются неоптимальными по сравнению с решением <a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">flex model</a> .</p><p>с появлением <a href="http://philipwalton.github.io/solved-by-flexbox/">css flex model</a> решение проблемы 100% высоты становится очень и очень простым: используйте <code>height: 100%; display: flex</code> для родительского элемента и <code>flex: 1</code> для дочерних элементов. они автоматически займут все доступное пространство в своем контейнере.</p><p>обратите внимание, насколько просты разметка и css. нет таблицы взломов или что-нибудь.</p><p>гибкая модель <a href="http://caniuse.com/#search=flex">поддерживается всеми основными браузерами</a> , а также ie11 +.</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { height: 100%; } body { display: flex; } .left, .right { flex: 1; } .left { background: orange; } .right { background: cyan; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="left">left</div> <div class="right">right</div></code></pre></div> </div><p>узнайте больше о <a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">гибкая модель</a> здесь.</p>

<p>вы не упоминаете несколько важных деталей, таких как:</p><ul> <li>является ли макет фиксированной ширины?</li> <li>фиксированная ширина одного или обоих столбцов?</li> </ul><p>вот одна из возможностей:</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>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 }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><html> <head> <title>example</title> </head> <body> <div id="wrapper"> <div id="left"> left </div> <div id="right"></div> </div> </body> </html></code></pre></div> </div><p>есть много вариантов этого в зависимости от того, какие колонки должны быть зафиксированы, а какие - жидкие. вы также можете сделать это с абсолютным позиционированием, но я, как правило, нашел лучшие результаты (особенно с точки зрения кросс-браузера), используя вместо этого плавающие.</p>

<p>вот что сработало для меня:</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div></code></pre></div> </div><p>используйте <code>position:fixed</code> вместо <code>position:absolute</code>, таким образом, даже если вы прокрутите вниз, разделение расширится до конца экрана.</p>

<p>вот исправление для высоты.</p><p>в вашем css используйте:</p><pre class="lang-css prettyprint-override"><code>#your-object: height: 100vh; </code></pre><p>для браузера, который не поддерживает <code>vh-units</code>, используйте modernizr.</p><p>добавьте этот скрипт (чтобы добавить обнаружение для <code>vh-units</code>)</p><pre><code>// 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; }); </code></pre><p>наконец, используйте эту функцию, чтобы добавить высоту области просмотра в <code>#your-object</code>, если браузер не поддерживает <code>vh-units</code>:</p><pre><code>$(function() { if (!modernizr.cssvhunit) { var windowh = $(window).height(); $('#your-object').css({'height':($(window).height())+'px'}); } }); </code></pre>

<p><code>100%</code> работает по-разному для ширины и высоты.</p><p>когда вы указываете <code>width: 100%</code>, это означает "занять 100% доступной ширины от родительского элемента или ширины окна".</p><p>когда вы указываете <code>height: 100%</code>, это означает только "занять 100% доступной высоты у родительского элемента". это означает, что если вы не укажете высоту в элементе верхнего уровня, высота всех дочерних элементов будет либо <code>0</code>, либо высотой родительского элемента, и поэтому вам нужно установить самый верхний элемент, чтобы <code>min-height</code> имел значение высота окна.</p><p>я всегда указываю, чтобы тело имело минимальную высоту 100vh, и это облегчает позиционирование и вычисления,</p><pre><code>body { min-height: 100vh; } </code></pre>

<p>добавьте <code>min-height: 100%</code> и не указывайте высоту (и не включайте ее автоматически). это полностью сделало работу за меня:</p><pre class="lang-css prettyprint-override"><code>.container{ margin: auto; background-color: #909090; width: 60%; padding: none; min-height: 100%; } </code></pre>

<p>100vw === 100% ширины области просмотра.</p><p>100vh === 100% высоты окна просмотра.</p><p>если вы хотите установить ширину или высоту <code>div</code> в 100% от размера окна браузера, вы должны использовать</p><p>для ширины: <code>100vw</code></p><p>для высоты: <code>100vh</code></p><p>или если вы хотите установить меньший размер, используйте css <code>calc function</code>. пример:</p><p><code>#example { width: calc(100vw - 32px) }</code></p>

<p>это сработало для меня:</p><pre class="lang-css prettyprint-override"><code>html, body { height: 100%; /* important!!! stretches viewport to 100% */ } #wrapper { min-height: 100%; /* min. height for modern browser */ height:auto !important; /* important rule for modern browser */ height:100%; /* min. height for ie */ overflow: hidden !important; /* ff scroll-bar */ } </code></pre><p>взято из <a href="http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html">эта страница</a> .</p>

<p>существует несколько методов для установки высоты <code><div></code> на 100%.</p><p><strong>метод (а):</strong></p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { height: 100%; min-height: 100%; } .div-left { height: 100%; width: 50%; background: green; } .div-right { height: 100%; width: 50%; background: gray; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="div-left"></div> <div class="div-right"></div></code></pre></div> </div><p><strong>метод (b) с использованием vh:</strong></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="div-left"></div> <div class="div-right"></div></code></pre></div> </div><p><strong>метод (c) с использованием flex box:</strong></p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="wrapper"> <div class="div-left"></div> <div class="div-right"></div> </div></code></pre></div> </div>

<p>попробуйте установить <code>height:100%</code> в <code>html</code> & <code>body</code></p><pre class="lang-css prettyprint-override"><code>html, body { height: 100%; } </code></pre><p>и если вы хотите, чтобы высота 2 div была одинаковой, используйте или установите свойство родительского элемента <code>display:flex</code>.</p>

<p>просто используйте модуль "vh" вместо "px", что означает высоту порта просмотра.</p><pre><code>height:100vh; </code></pre>

<p> <a href="http://learnlayout.com/flexbox.html">используйте flexbox css</a> </p><p>flexbox идеально подходит для решения подобных задач. несмотря на то, что flexbox известен в основном для размещения контента в горизонтальном направлении, он на самом деле работает также и для задач вертикального размещения. все, что вам нужно сделать, это обернуть вертикальные секции в гибкий контейнер и выбрать, какие из них вы хотите расширить. они автоматически займут все доступное пространство в своем контейнере.</p>

<p>одним из вариантов является использование таблицы css. он имеет отличную поддержку браузера, даже работает в ie8.</p><p><strong> <a href="https://jsfiddle.net/ez8w5k57/">пример jsfiddle</a> </strong></p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { height: 100%; margin: 0; } .container { display: table; width: 100%; height: 100%; } .left, .right { display: table-cell; width: 50%; } .right { background: grey; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container"> <div class="left"></div> <div class="right"></div> </div></code></pre></div> </div>

<p>по умолчанию блочные элементы занимают всю ширину родительского элемента.</p><p>это то, как они отвечают их требованиям к дизайну, а именно, к вертикальной укладке.</p><blockquote> <p> <a href="https://www.w3.org/tr/css22/visuren.html#block-formatting"><strong> 9.4.1 контексты блочного форматирования </strong></a> </p> <p>в контексте форматирования блоков блоки располагаются один за другим вертикально, начиная с верхней части содержащего блока.</p> </blockquote><p>это поведение, однако, не распространяется на высоту.</p><p>по умолчанию большинство элементов имеют высоту своего содержимого (<code>height: auto</code>).</p><p>в отличие от ширины, вам нужно указать высоту, если вы хотите дополнительное пространство.</p><p>поэтому имейте в виду эти две вещи:</p><ul> <li>если вам не нужна полная ширина, вам нужно определить ширину блочного элемента</li> <li>если вы не хотите высоту содержимого, вам нужно определить высоту элемента</li> </ul><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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 */</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre></div> </div>

<p>вы можете использовать <code>display: flex</code> и <code>height: 100vh</code></p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { height: 100%; margin: 0px; } body { display: flex; } .left, .right { flex: 1; } .left { background: orange; } .right { background: cyan; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="left">left</div> <div class="right">right</div></code></pre></div> </div>

<p>вам нужно сделать две вещи, одна из них - установить высоту на 100%, что вы уже сделали. второе - установить абсолютное положение. это должно делать свое дело.</p><pre class="lang-css prettyprint-override"><code>html, body { height: 100%; min-height: 100%; position: absolute; } </code></pre><p> <a href="http://www.snoopcode.com/css/css-units">источник</a> </p>

<p>попробуйте это - проверено:</p><pre class="lang-css prettyprint-override"><code>body { min-height: 100%; } #right, #left { height: 100%; } </code></pre>

<p>попробуйте следующее css:</p><pre class="lang-css prettyprint-override"><code>html { min-height: 100%; margin: 0; padding: 0; } body { height: 100%; } #right { min-height: 100%; } </code></pre>

<pre><code> 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> </code></pre><p>css</p><pre><code><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> </code></pre>

<p>если вы используете <code>position: absolute;</code> и jquery, вы можете использовать</p><pre><code>$("#mydiv").css("height", $(document).height() + "px"); </code></pre>

<p>на самом деле, что мне больше всего помогло, так это использование свойства vh, в моем приложении реакции я хотел, чтобы div соответствовал максимуму страницы, даже если попытался изменить размер <em> высота: 100%; </em>, <em> overflow-y: auto; </em>, ни один из них не работал при установке <strong>height: (ваш процент) vh;</strong> это сработало как предполагалось. примечание: если вы используете отступы, закругленные углы и т.д., убедитесь, что вычитаете эти значения из вашего свойства в процентах, или это добавляет дополнительную высоту и заставляет появляться полосы прокрутки, вот мой пример:</p><pre><code>.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); } </code></pre>

<p>вы можете использовать следующий css, чтобы сделать div на 100% высоты окна браузера:</p><pre><code>display: block; position: relative; bottom: 0; height: 100%; </code></pre>

<p>самый простой:</p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><html class=""> <body> <div class="fullheight"> this is full height. </div> </body> </html></code></pre></div> </div>

<p>вот то, что не совсем то, что вы имели выше, но может быть полезным для некоторых.</p><pre><code>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; } </code></pre><p> <a href="https://jsfiddle.net/newdark/qyxkk558/10/">https://jsfiddle.net/newdark/qyxkk558/10/</a> </p>

<blockquote> <p>этот материал автоматически изменит высоту содержимого в соответствии с вашим браузером. я надеюсь, что это будет работать для вас. просто попробуйте этот пример, приведенный ниже.</p> </blockquote><p>вы должны установить только <code>height:100%</code>.</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code> 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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class='content' id='one'></div> <div class='content-left' id='two'></div></code></pre></div> </div>