设置DIV的高度等于屏幕尺寸(Set div height equal to screen size

我在Twitter的自举一个div元素，这将有以垂直溢出屏幕之外的内容。

我想股利采取浏览器窗口大小的高度，让内容滚动其余垂直窗口内。

我有没有工作@样本的jsfiddle

#content {
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">Side Bar</div>

        <div class="span9" id="content">
            Content Bar Example Content
        </div>
    </div>
</div>

我读像这样的问题后，发布了这个问题做题

编辑 -

对不起球员，我想我有我的问题是错误的。

我想的是，我的div必须填满屏幕的垂直空间的其余部分。

这将是巨大的，如果有人能提出一个解决方案响应

Answer 1:

使用CSS {height: 100%;}匹配父的高度。 这可以是任何东西，这意味着比屏幕较小或较大。 使用{height: 100vh;}匹配视口的高度。

.container {
    height: 100vh;
    overflow: auto;
}

根据Mozilla的官方文档，1vh是：

等于视口的初始包含块的高度的1％。

Answer 2:

你需要给height父元素呢！ 看看这个小提琴 。

CSS：

html, body {height: 100%;}

#content, .container-fluid, .span9
{
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}​

JavaScript的（使用jQuery）方式：

$(document).ready(function(){
    $(window).resize(function(){
        $(".fullheight").height($(document).height());
    });
});

Answer 3:

试试这个

$(document).ready(function(){
    $('#content').height($(window).height());
});

Answer 4:

使用

  的$（document）.height（） 

财产和设置从脚本div和设置

  overflow=auto 

滚动

Answer 5:

这为我工作的jsfiddle

HTML

..bootstrap
<div class="row">
  <div class="col-4 window-full" style="background-color:green">
    First Col
  </div>
  <div class="col-8">
    Column-8
  </div>
</div>

CSS

.row {
   background: #f8f9fa;
   margin-top: 20px;
}

 .col {
   border: solid 1px #6c757d;
   padding: 10px;
}

JavaScript的

var elements = document.getElementsByClassName('window-full');
var windowheight = window.innerHeight + "px";

fullheight(elements);
function fullheight(elements) {
    for(let el in elements){
        if(elements.hasOwnProperty(el)){
            elements[el].style.height = windowheight;
        }
    }
}

window.onresize = function(event){
     fullheight(elements);
}

结帐的jsfiddle链接的jsfiddle

文章来源: Set div height equal to screen size