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

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

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

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

1679
задан mike 16 окт. '09 в 0:18
источник поделиться
33 ответов
  • 1
  • 2

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

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

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

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

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

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

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

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

HTML

<div></div>

CSS

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, чтобы легко увидеть разницу!

2362
ответ дан James Donnelly 30 мая '13 в 16:33
источник поделиться

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

Вот пример:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
520
ответ дан Ariona Rian 11 дек. '11 в 16:10
источник поделиться

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

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

сделает это.

241
ответ дан Tinister 16 окт. '09 в 0:31
источник поделиться

Вы можете использовать блок 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*/
}
127
ответ дан Mr Geek 04 мая '16 в 14:11
источник поделиться

Все другие решения, в том числе верхний проголосовавший с 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 здесь.

85
ответ дан Airen 12 июня '13 в 17:14
источник поделиться

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

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

Здесь одна возможность:

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.

47
ответ дан cletus 16 окт. '09 в 2:13
источник поделиться

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

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

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

How to make a div 100% height of the browser window?

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

.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>
40
ответ дан Alireza 03 июня '17 в 20:43
источник поделиться

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

В вашем использовании 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'});
    }
});
25
ответ дан Jonas Sandstedt 21 авг. '13 в 19:57
источник поделиться

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

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

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

24
ответ дан Majda 27 июля '13 в 19:18
источник поделиться

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

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}
14
ответ дан Remus Simion 11 дек. '11 в 0:34
источник поделиться

Существует несколько способов установить высоту от <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>
11
ответ дан Santosh Khalse 04 янв. '17 в 13:43
источник поделиться

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

html, 
body {
    height: 100%;
}

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

11
ответ дан Mohammed Javed 14 апр. '16 в 13:19
источник поделиться

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

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

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

11
ответ дан testing 12 июня '13 в 17:01
источник поделиться

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

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

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

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

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

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

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

11
ответ дан Руслан 27 сент. '17 в 17:06
источник поделиться

100vh отлично работает для меня, нужно отметить, что попытка сделать 80vh или 90vh приводит к неожиданным результатам на экранах разных размеров.

8
ответ дан learn2reid 03 дек. '17 в 2:45
поделиться

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

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

6
ответ дан robross0606 07 мая '15 в 0:16
источник поделиться

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

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

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>
6
ответ дан Michael_B 03 окт. '17 в 16:46
источник поделиться

Один из вариантов - использование таблицы 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;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
6
ответ дан Stickers 25 янв. '16 в 20:36
источник поделиться

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

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

Источник

5
ответ дан Prabhakar 16 окт. '15 в 13:28
источник поделиться

Вы можете использовать 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>
4
ответ дан Thức Nguyễn Quy 29 окт. '17 в 9:55
источник поделиться

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

height:100vh;
3
ответ дан khalifeh 10 марта '18 в 3:52
источник поделиться

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

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}
3
ответ дан mrmnmly 28 янв. '13 в 14:05
источник поделиться
 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>
2
ответ дан RamNiwas Sharma 30 апр. '18 в 14:02
источник поделиться

Вы можете использовать JavaScript для динамического расчета высоты в браузере. Например, используйте технологию CSS-IN-JS, предоставленную библиотекой CSSOBJ.

Демо: https://cssobj.github.io/cssobj-demo/

1
ответ дан James Yang 13 окт. '16 в 5:41
источник поделиться

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

$("#mydiv").css("height", $(document).height() + "px");
1
ответ дан John Smith Optional 12 сент. '13 в 12:41
источник поделиться

Попробуйте выполнить следующий css:

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
1
ответ дан ProblemChild 18 апр. '17 в 8:56
источник поделиться

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

Вы должны установить только 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>
0
ответ дан Rudra 22 мая '18 в 8:02
источник поделиться

попробовать
max-width: 5000px;
min-width: 1px;

Это должно помочь просто сделать <div> размером с окно браузера.

0
ответ дан EgMusic 05 окт. '17 в 19:04
источник поделиться

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

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>
0
ответ дан Tony Smith 18 апр. '14 в 22:37
источник поделиться

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

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/

0
ответ дан Brandt 12 июня '17 в 17:52
источник поделиться
  • 1
  • 2

Другие вопросы по меткам