it-swarm.com.ru

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

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

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

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

1920
mike

Есть несколько единиц измерения CSS3, которые называются:

Viewport-Percentage (или Viewport-Relative) Lengths

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

Из приведенной выше рекомендации кандидата 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, 100% от 200px становится 200px, not 100% от высоты body. Использование вместо этого 100vh означает, что тег p будет на 100% больше высоты body независимо от высоты div. Взгляните на это сопровождает JSFiddle , чтобы легко увидеть разницу!

2598
James Donnelly

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

Вот пример:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
542
Ariona Rian

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

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

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

264
Tinister

Вы можете использовать модуль 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*/
}
133
MrGeek

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

Все остальные решения, включая решение с наибольшим количеством голосов с vh, являются неоптимальными по сравнению с решением flex model .

С появлением CSS flex model решение проблемы 100% высоты становится очень и очень простым: используйте height: 100%; display: flex для родительского элемента и flex: 1 для дочерних элементов. Они автоматически займут все доступное пространство в своем контейнере.

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

Гибкая модель поддерживается всеми основными браузерами , а также 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>

Узнайте больше о гибкая модель здесь.

94
Airen

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

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

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

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>

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

53
cletus

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

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

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

31
Majda

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

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

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

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

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

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

body {
  min-height: 100vh;
}
20
Dinesh Pandiyan

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

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

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

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

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

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

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

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

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

14
Руслан

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

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

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

12
testing

Существует несколько методов для установки высоты <div> на 100%.

Метод (А):

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) с использованием flex box:

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>
12
Santosh Khalse

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

html, 
body {
    height: 100%;
}

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

11
Mohammed Javed

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

height:100vh;
7
khalifeh

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

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

6
robross0606

Одним из вариантов является использование таблицы 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

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

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

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

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

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

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

Источник

5
Prabhakar

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

body {
  min-height: 100%;
}

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

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

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

body {
    height: 100%;
}

#right {
    min-height: 100%;
}
3
ProblemChild
 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

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

$("#mydiv").css("height", $(document).height() + "px");
1
John Smith Optional

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

}
1
JimmyFlash

Вы можете использовать следующий CSS, чтобы сделать div на 100% высоты окна браузера:

display: block;
position: relative;
bottom: 0;
height: 100%;
0
mohammad nazari

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

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

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

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
brand-it

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

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