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


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

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

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


1648


источник


Ответы:


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

Viewport-проценты (или Viewport-Relative) Длины

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

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


2320



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

Вот пример:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

515



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

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

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


237



You can use the view-port unit in 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*/
}

126



All the other solutions, including the top-voted one with vh are sub-optimal when compared to the flex model solution.

With the advent of the CSS flex model, solving the 100% height problem becomes very, very easy: use height: 100%; display: flex on the parent, and flex: 1 on the child elements. They'll automatically take up all the available space in their container.

Note how simple the markup and the CSS are. No table hacks or anything.

The flex model is supported by all major browsers as well as 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>

Learn more about the flex model here.


85



You don't mention a few important details like:

  • Is the layout fixed width?
  • Are either or both of the columns fixed width?

Here's one possibility:

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>

There are many variations on this depending on which columns need to be fixed and which are liquid. You can do this with absolute positioning too but I've generally found better results (particularly in terms of cross-browser) using floats instead.


47



You can use vh in this case which is relative to 1% of the height of the viewport.

That means if you want to cover off the height, just use 100vh.

Look at the image I draw for you here:

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

Try the snippet I created for you as below:

.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>


33



Here's a fix for the height.

In your CSS use:

#your-object: height: 100vh;

For browser that don't support vh-units, use modernizr.

Add this script (to add detection for 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;
});

Finally use this function to add the height of the viewport to #your-object if the browser doesn't support vh-units:

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

25



This is what worked for me:

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

Use position:fixed instead of position:absolute, that way even if you scroll down the division will expand to the end of the screen.


24



Add min-height: 100% and don't specify a height (or put it on auto). It totally did the job for me:

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

14