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

Существует несколько методов для установки высоты <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>

Несмотря на то, что это решение сделано с помощью 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%.

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

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

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

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

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

body {
  min-height: 100vh;
}

На самом деле то, что мне больше всего помогло, это использование свойства 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);
}

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

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

Если вы используете 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%;
}

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

• Является ли макет фиксированной ширины?
• Фиксированная ширина одного или обоих столбцов?

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

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>

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

Добавьте 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%; /* 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 */
}

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

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

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/

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

html, 
body {
    height: 100%;
}

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

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

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

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

Вот пример:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

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

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

Источник

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

body {
  min-height: 100%;
}

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

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

height: 100vh;

Вы можете использовать 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>

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

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

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

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

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

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

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

Вы можете использовать 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>

Используйте FlexBox CSS

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

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

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>

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

В вашем 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'});
    }
});

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

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

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