引导程序中的 100% 高度 div [重复]答案

【问题标题】：100% height divs in bootstrap [duplicate]引导程序中的 100% 高度 div [重复]
【发布时间】：2015-07-19 21:47:02
【问题描述】：

我有这段带有引导程序的代码...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10">
            <div class="panel panel-info">
                <div class="panel-heading">CHAT</div>
                <div class="panel-body">text</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="panel panel-primary">
                <div class="panel-heading">ONLINE</div>
                <div class="panel-body">text</div>
            </div>
        </div>
    </div>
</div>

我需要让列的高度为 100%，并且该列中的面板也为 100%。

感谢您的帮助。

【问题讨论】：

你需要jQuery阅读我的回答。希望对你有帮助。

标签： html css twitter-bootstrap

【解决方案1】：

这里有一些可以帮助你的东西。

现场样例HERE

HTML

<div class="your-div">
    // Contents
</div>

CSS

.your-div {
    background-color: #ccc;
}

//Gets the current height of the screen.
var screenHeight = $(window).height(); 
var yourDiv = $('.your-div');

// Assign that height to the .row
yourDiv.css({
    'height': screenHeight + 'px',
});

// This makes the div's height responsive when you resize the screen or the window of the browser.
$(window).resize(function () {
    screenHeight = $(window).height();
    yourDiv.css({
        'height': screenHeight + 'px',
    });
});

现场样本HERE

【讨论】：

【解决方案2】：

如果您已将类的高度设置为 100%，但它似乎没有任何区别，请确保它的父对象（例如 body 或 HTML）也设置为 100%

【讨论】：

全部设置为 100% 使其超过 100% 的高度。它使页面可滚动.. :/
好吧，也许 100vh 可以代替，但是根据我的经验，我必须使用少于 100vh（不确定 vh 代表什么，但我假设它的视频高度）。因此，对于我的 Web 表单，我使用 90vh，它避免了可滚动问题。如果你得到一个滚动条，那么可能 div 内的某些对象太大，或者正在适应高度（给 div 内的对象以像素为单位的固定高度，或者如果不确定所有对象的总和加起来到 100%）。

【解决方案3】：

你试过了吗：

 .row {
   min-height: 100vh; }

【讨论】：