У меня есть макет с двумя столбцами - левый div и правый div.
Право div имеет серый background-color, и мне это нужно, чтобы развернуть вертикально, в зависимости от высоты окна браузера пользователя. Прямо сейчас background-color заканчивается на последнем фрагменте содержимого в этом div.
Я пробовал height:100%, min-height:100%; , так далее.
Существует несколько единиц измерения CSS 3, которые называются:
Из приведенной выше рекомендации кандидата W3:
Длина области просмотра в процентах относится к размеру исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они масштабируются соответственно.
Этими единицами являются vh (высота области просмотра), vw (ширина области просмотра), vmin (минимальная длина области просмотра) и vmax (максимальная длина области просмотра).
Для этого вопроса мы можем использовать vh: 1vh равен 1% высоты области просмотра. То есть 100vh равно высоте окна браузера, независимо от того, где находится элемент в дереве DOM:
<div></div>
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, чтобы легко увидеть разницу!
Если вы хотите установить высоту <div> или любого элемента, вы должны установить высоту <body> и <html> на 100%. Затем вы можете установить высоту элемента со 100%:)
Вот пример:
body, html {
height: 100%;
}
#right {
height: 100%;
}
Если вы можете полностью позиционировать свои элементы,
position: absolute;
top: 0;
bottom: 0;
сделает это.
Вы можете использовать модуль 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 */
}
В этом случае вы можете использовать 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>Все другие решения, в том числе верхний проголосовавший с vh, являются субоптимальными по сравнению с решением CSS flex model решение 100% проблемы с высотой становится очень простым: используйте height: 100%; display: flex на родительском, и flex: 1 для дочерних элементов. Они автоматически займут все свободное место в контейнере.
Обратите внимание, насколько проста разметка и CSS. Нет табличных хаков или чего-то еще.
Модель flex поддерживается всеми основными браузерами, а также IE11 +.
html, body {
height: 100%;
}
body {
display: flex;
}
.left, .right {
flex: 1;
}
.left {
background: orange;
}
.right {
background: cyan;
}<div class="left">left</div>
<div class="right">right</div>Вы не упомянули несколько важных деталей, таких как:
Здесь одна возможность:
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>Вот что сработало для меня:
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>Здесь исправление для высоты.
В вашем использовании CSS:
#your-object: height: 100vh;
Для браузера, который не поддерживает vh-units, используйте modernizr.
Добавьте этот script (чтобы добавить определение для 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'});
}
});
100% работает по-разному для ширины и высоты.
Когда вы указываете width: 100%, это означает, что "занять 100% доступной ширины у родительского элемента или ширины окна".
Когда вы указываете height: 100%, это означает только "получение 100% доступной высоты от родительского элемента". Это означает, что если вы не укажете высоту в элементе верхнего уровня, высота всех дочерних элементов будет равна либо 0 либо высоте родительского элемента, и поэтому вам необходимо установить для верхнего элемента min-height: высота окна
Я всегда указываю, чтобы тело имело минимальную высоту 100vh, и это облегчает позиционирование и вычисления,
body {
min-height: 100vh;
}
Добавьте min-height: 100% и не указывайте высоту (или установите ее автоматически). Это полностью помогло мне:
.container{
margin: auto;
background-color: #909090;
width: 60%;
padding: none;
min-height: 100%;
}
100vw === 100% ширины области просмотра.
100vh === 100% высоты окна просмотра.
Если вы хотите установить ширину div или высоту в 100% от размера окна браузера, вы должны использовать:
Для ширины: 100vw
Для высоты: 100vh
Или, если вы хотите установить меньший размер, используйте функцию CSS calc. Пример:
#example {
width: calc(100vw - 32px)
}
Это сработало для меня:
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 */
}
Взято с этой страницы.
Существует несколько способов установить высоту от <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>Попробуйте установить height:100% в html и body
html,
body {
height: 100%;
}
И если вы хотите использовать ту же самую высоту 2 div или установить родительский элемент display:flex.
100vh отлично работает для меня, нужно отметить, что попытка сделать 80vh или 90vh приводит к неожиданным результатам на экранах разных размеров.
Просто используйте модуль "vh" вместо "px", что означает высоту порта просмотра.
height: 100vh;
Flexbox идеально подходит для такого типа задач. Несмотря на то, что в основном известно, что для размещения контента в горизонтальном направлении, FlexBox действительно работает так же, как и для вертикальных задач макета. Все, что вам нужно сделать, это обернуть вертикальные секции в гибком контейнере и выбрать, какие из них вы хотите расширить. Theyll автоматически занимает все свободное место в контейнере.
Одним из вариантов является использование таблицы CSS. Он имеет отличную поддержку браузера и даже работает в Internet Explorer 8.
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>По умолчанию элементы блока потребляют полную ширину своего родителя.
Именно так они отвечают их требованиям к дизайну, которые должны складываться вертикально.
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>Попробуйте это - протестировано:
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
Вам нужно сделать две вещи: нужно установить высоту до 100%, которую вы уже сделали. Второе устанавливает абсолютное положение. Это должно делать свое дело.
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
Вы можете использовать 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>Попробуйте следующий CSS:
html {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
#right {
min-height: 100%;
}
// 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>
<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>
Если вы используете position: absolute; и jQuery, вы можете использовать
$("#mydiv").css("height", $(document).height() + "px");
Вы можете использовать JavaScript для динамического расчета высоты в браузере. Например, используйте технологию CSS-IN-JS, предоставленную библиотекой CSSOBJ.
На самом деле то, что мне больше всего vh свойства 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);
}
Самый простой:
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>Вот что-то, что не совсем то, что вы имели в предыдущих ответах, но может быть полезно для некоторых:
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;
}