Html 设置 div 高度等于屏幕大小

Set div height equal to screen size

提问by Anand Sunderraman

I have a div element in twitter-bootstrap which will have content that will overflow vertically outside the screen.

我在 twitter-bootstrap 中有一个 div 元素，它的内容将垂直溢出屏幕外。

I would like the div to take the height of the size of the browser window and let the rest of the content scroll vertically within the window.

我希望 div 占据浏览器窗口大小的高度，并让其余内容在窗口内垂直滚动。

I have a sample that is not working @jsFiddle

我有一个不工作的样本@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>

I am posting this question after reading so questions like SO Questions

我在阅读了诸如SO Questions 之类的问题后发布了这个问题

EDIT--

编辑 -

Sorry guys I guess I got my question wrong.

对不起，伙计们，我想我的问题错了。

What I would like is that my div must fill the rest of the vertical space in the screen.

我想要的是我的 div 必须填充屏幕中其余的垂直空间。

It would be great if someone can suggest a responsive solution

如果有人可以提出响应式解决方案，那就太好了

回答by Kurt Van den Branden

Using CSS {height: 100%;}matches the height of the parent. This could be anything, meaning smaller or bigger than the screen. Using {height: 100vh;}matches the height of the viewport.

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

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

According to Mozilla'sofficial documents, 1vh is:

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

Equal to 1% of the height of the viewport's initial containing block.

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

回答by Praveen Kumar Purushothaman

You need to give heightfor the parent element too! Check out this fiddle.

你也需要height为父元素付出！看看这个小提琴。

CSS:

CSS：

html, body {height: 100%;}

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

JavaScript (using jQuery) Way:

JavaScript（使用jQuery）方式：

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

回答by gaurang171

try this

尝试这个

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

回答by Aravindhan

use

用

 $(document).height()

属性并从脚本设置为 div 并设置

  overflow=auto 

for scrolling

用于滚动

回答by Chaudhari Akash

This worked for me JsFiddle

这对我有用 JsFiddle

Html

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

css

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

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

JavaScript

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);
}

Checkout JsFiddle link JsFiddle

结帐 JsFiddle 链接 JsFiddle

回答by Sahil Ralkar

Use simple CSS height: 100%;matches the height of the parentand using height: 100vhmatches the height of the viewport.

使用简单的 CSS高度：100%；匹配父级的高度并使用height: 100vh匹配视口的高度。

Use vhinstead of %;

使用vh而不是%;