设置 div 高度等于屏幕大小答案

【问题标题】：Set div height equal to screen size设置 div 高度等于屏幕大小
【发布时间】：2012-08-23 17:21:51
【问题描述】：

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

我希望 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>

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

编辑--

抱歉各位，我猜我的问题搞错了。

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

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

【问题讨论】：

你试过类似 .div{ height: 100vh; }

标签： css html twitter-bootstrap height responsive-design

【解决方案1】：

使用简单的 CSS height: 100%; 匹配 parent 的高度，使用 height: 100vh 匹配 的高度>视口。

使用 vh 代替 %；

【讨论】：

【解决方案2】：

这对我有用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

【讨论】：

【解决方案3】：

您也需要为父元素提供height！看看这个fiddle。

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

【讨论】：

这里有使用js的理由吗？这个 css 在某些浏览器/设备上是否有问题？
@German 请用更多票检查答案。它只有 JS 解决方案，而我专注于 JS 和 CSS。
这不是我要问的。我在问为什么我不能只使用css。它有我没有注意到的缺点吗？
一个简单的“不，你不必使用 JS。是的，你可以只使用 CSS。”会回答德国人的问题。
这是 jquery 的做法，不是纯 Javascript！

【解决方案4】：

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

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

根据Mozilla's官方文档，1vh为：

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

【讨论】：

【解决方案5】：

试试这个

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

【讨论】：

-1 用于仅 JS 的解决方案。 JS 可以作为布局的一个很好的后备解决方案，但作为主要的布局机制——我不能同意。
如果窗口大小或方向发生变化，也将不起作用。
建议使用最小高度

【解决方案6】：

使用

 $(document).height()

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

 溢出=自动

用于滚动

【讨论】：