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

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

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

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

Существует несколько единиц измерения CSS3:

Длина видовых экранов (или длина видовых экранов)

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

Из приведенной выше рекомендации кандидата W3:

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

Эти единицы – vh (высота видового экрана), vw (ширина vmin просмотра), vmin (минимальная длина видового экрана) и vmax (максимальная длина vmin просмотра).

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

По этому вопросу мы можем использовать vh : 1vh равно 1% высоты видового экрана. То есть 100vh равно высоте windows браузера, независимо от того, где элемент находится в дереве DOM:

HTML

 

CSS

 div { height:100vh; } 

Это буквально все, что нужно. Вот пример использования JSFiddle .

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

В настоящее время это поддерживается всеми современными браузерами, помимо Opera Mini. Проверьте Могу ли я использовать … для дальнейшей поддержки.

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

В случае вопроса с изображением левого и правого делителей, вот пример JSFiddle, показывающий двухколоночный макет, включающий как vh и vw .

Как 100vh отличается от 100% ?

Возьмите этот макет, например:

  

Hello, world!

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

Если вы хотите установить высоту

или любого элемента, вы должны установить высоту и на 100%. Затем вы можете установить высоту элемента со 100% 🙂

Вот пример:

 body, html { height: 100%; } #right { height: 100%; } 

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

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

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

Вы можете использовать блок view-port в CSS:

HTML:

 
Hello World!

CSS:

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

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

С появлением модели Flex Flex решение проблемы 100% высоты становится очень простым: используйте height: 100%; display: flex 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; } 
 
left
right

Вы не упомянули несколько важных деталей, таких как:

  • Является ли фиксированная ширина макета?
  • Являются ли обе или оба столбца фиксированной шириной?

Вот одна из возможностей:

 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 } 
   Example   
Left

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

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

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

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

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

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

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

В вашем использовании 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; }); 

Наконец, используйте эту функцию, чтобы добавить высоту windows просмотра к #your-object если браузер не поддерживает vh-units :

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

Это то, что сработало для меня:

 

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

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

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

Это сработало для меня:

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

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

Существует несколько способов установить высоту

на 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; } 
 

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

 html, body { height: 100%; } 

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

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

100vh === 100% высоты windows просмотра.

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

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

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

или если вы хотите установить его меньший размер, используйте calc function css calc function . Пример:

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

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

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

Один из вариантов – использование таблицы CSS. Он имеет отличную поддержку браузера, даже работает в IE8.

Пример JSFiddle

 html, body { height: 100%; margin: 0; } .container { display: table; width: 100%; height: 100%; } .left, .right { display: table-cell; width: 50%; } .right { background: grey; } 
 

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

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

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

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.

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

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

Источник

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

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

Вы можете использовать display: flex и height: 100vh

 html, body { height: 100%; margin: 0px; } body { display: flex; } .left, .right { flex: 1; } .left { background: orange; } .right { background: cyan; } 
 
left
right

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

 height:100vh; 
  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. 
Left
right

CSS

  

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

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

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

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

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

 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; } 
   
This is full height.

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

 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/

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

Вы должны установить только 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; } 
 

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

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

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

 body,html{ height:100%; } div#right{ height:100% } 

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

  

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

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