У меня есть макет с двумя столбцами - левый div
и правый div
.
Право div
имеет серый background-color
, и мне это нужно, чтобы развернуть вертикально, в зависимости от высоты окна браузера пользователя. Прямо сейчас background-color
заканчивается на последней части содержимого в этом div
.
Я пробовал height:100%
, min-height:100%;
и т.п.
Существует несколько единиц измерения CSS3:
Из приведенной выше рекомендации кандидата 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
имеет 200px height, 100 %200px становится 200px, а не 100% от высоты body
. Использование 100vh
вместо этого означает, что тег p
будет 100% высоты body
независимо от высоты div
. Взгляните на этот сопровождающий JSFiddle, чтобы легко увидеть разницу!
min-height:100vh
кажется, работает вокруг этого.
Если вы хотите установить высоту <div>
или любого элемента, вы должны установить высоту <body>
и <html>
на 100%. Затем вы можете установить высоту элемента со 100%:)
Вот пример:
body, html {
height: 100%;
}
#right {
height: 100%;
}
Если вы можете полностью позиционировать свои элементы,
position: absolute;
top: 0;
bottom: 0;
сделает это.
position:relative
и его высота не равна 100% от области просмотра. Он отрегулирует верх и низ к своему следующему относительному или абсолютному предку.
Вы можете использовать блок 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*/
}
* { box-sizing: border-box; }
чтобы этого не случилось.
Все другие решения, в том числе верхний проголосовавший с 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>
Подробнее о flex model здесь.
В этом случае вы можете использовать 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>
Вы не упомянули несколько важных деталей, таких как:
Здесь одна возможность:
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>
В этом случае существует множество вариаций, в зависимости от того, какие столбцы необходимо фиксировать и которые являются жидкостями. Вы можете сделать это и с абсолютным позиционированием, но я обычно нашел лучшие результаты (особенно с точки зрения кросс-браузера), используя вместо них float.
Здесь исправление для высоты.
В вашем использовании 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'});
}
});
Это то, что сработало для меня:
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>
Используйте position:fixed
вместо position:absolute
, таким образом, даже если вы прокрутите вниз, разделение будет расширяться до конца экрана.
Добавьте 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 function
. Пример:
#example {
width: calc(100vw - 32px)
}
Это сработало для меня:
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 */
}
Взято из на этой странице.
Существует несколько способов установить высоту от <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>
Попробуйте установить height:100%
в html
и body
html,
body {
height: 100%;
}
И если вы хотите использовать ту же самую высоту 2 div или установить родительский элемент display:flex
.
100vh отлично работает для меня, нужно отметить, что попытка сделать 80vh или 90vh приводит к неожиданным результатам на экранах разных размеров.
просто используйте "vh" вместо "px", что означает высоту порта представления.
height:100vh;
По умолчанию элементы блока потребляют полную ширину своего родителя.
Именно так они отвечают их требованиям к дизайну, которые должны складываться вертикально.
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>
Один из вариантов - использование таблицы CSS. Он имеет отличную поддержку браузера, даже работает в IE8.
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>
Flexbox идеально подходит для такого типа задач. Несмотря на то, что в основном известно, что для размещения контента в горизонтальном направлении, FlexBox действительно работает так же, как и для вертикальных задач макета. Все, что вам нужно сделать, это обернуть вертикальные секции в гибком контейнере и выбрать, какие из них вы хотите расширить. Theyll автоматически занимает все свободное место в контейнере.
Вы можете использовать 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>
Попробуйте это - протестировано:
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
Вам нужно сделать две вещи: нужно установить высоту до 100%, которую вы уже сделали. Второе устанавливает абсолютное положение. Это должно делать свое дело.
html,
body {
height: 100%;
min-height: 100%;
position: absolute;
}
vh
.
100%
работает по-разному для ширины и высоты.
Когда вы указываете width: 100%
, это означает, что "занять 100% доступной ширины у родительского элемента или ширины окна".
Когда вы указываете height: 100%
, это означает только "получение 100% доступной высоты от родительского элемента". Это означает, что если вы не укажете высоту в элементе верхнего уровня, высота всех дочерних элементов будет равна либо 0
либо высоте родительского элемента, и поэтому вам необходимо установить для верхнего элемента min-height
окна высота.
Я всегда указываю, чтобы тело имело минимальную высоту 100vh, и это облегчает позиционирование и вычисления,
body {
min-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.
<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>
Попробуйте выполнить следующий css:
html {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
}
#right {
min-height: 100%;
}
На самом деле, что мне больше всего помогло, так это использование свойства vh, в моем приложении реагирования я хотел, чтобы div соответствовал максимуму страницы, даже при изменении размера. , переполнение-у: авто; Ни один из них не работал при установке высоты: (ваш процент) 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);
}
Вы можете использовать JavaScript для динамического расчета высоты в браузере. Например, используйте технологию CSS-IN-JS, предоставленную библиотекой CSSOBJ.
Если вы используете position: absolute;
и jQuery, вы можете использовать
$("#mydiv").css("height", $(document).height() + "px");
Вы можете достичь двумя способами: 1) Увеличьте высоту до 100%, если вы не знаете, какой длины должна быть страница.
html, body {
height: 100%;
}
.yourContainerClass {
min-height: 100%;
}
2) Если вы знаете, сколько вам нужно растянуть по вертикали, вы можете использовать высоту в "vh (вертикальная высота)".
.yourContainerClass{
height:80vh;
}
Я надеюсь, что это поможет вам. Спасибо!
Вы можете использовать следующий CSS, чтобы сделать div на 100% высоты окна браузера:
display: block;
position: relative;
bottom: 0;
height: 100%;
Этот материал автоматически изменит размер контента в соответствии с вашим браузером. Надеюсь, это сработает для вас. Просто попробуйте этот пример, приведенный ниже.
Вы должны установить только 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>
попробовать max-width: 5000px;
min-width: 1px;
Это должно помочь просто сделать <div>
размером с окно браузера.
Вот что-то, что не совсем похоже на то, что у вас было выше, но может быть полезно для некоторых.
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;
}
Самый простой:
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>
Несмотря на то, что это решение выполняется с помощью jQuery, хотя это может быть полезно для тех, кто делает столбцы в соответствии с размером экрана.
Для столбцов, начинающихся в верхней части страницы, это решение является самым простым.
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%
.
Второй способ получает высоту страницы, отображаемую пользователю, получая высоту тела, а затем вычитает размер заголовка, чтобы узнать, сколько высоты осталось для отображения столбца.
Сделайте это:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.left, .right {
width: 50%;
}
.left {
background: #f0f0f0;
}
.right {
background: #cccccc;
color: #2e2e2e;
position: fixed;
right: 0;
top: 0;
bottom: 0;
}
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
</div>
<div class="right">
THIS IS RIGHT
</div>
Я сохранил позицию фиксированной, потому что в абсолютном позиционировании, когда тело прокручивается, оно показывает, что оно не покрывает всю высоту окна.
Если вы все еще хотите сделать это с абсолютным позиционированием, вам может понадобиться немного jQuery для вычисления высоты документа, а затем установить эту высоту в правый div, например:
var getheight = $(document).height();
$(document).ready(function(){
$(".right").css("height", getheight+"px");
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.left, .right {
width: 50%;
}
.left {
background: #f0f0f0;
}
.right {
background: #cccccc;
color: #2e2e2e;
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
<script src="/jquery.min.js"></script>
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
</div>
<div class="right">
THIS IS RIGHT
</div>
.yourClass{height:100vh;}
что это действительно. Некоторые другие css в соответствии с вашим дизайном не повредят никакой другой вещи.
Этот Pen - это именно то, что вы ищите, это решит вашу проблему.