Question

我有这段代码带有bootstrap ......

<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％。

感谢您的帮助。

Answer 1

如果您已将类的高度设置为100％并且它似乎没有区别，请确保它的父对象（例如正文或HTML）也设置为100％

Answer 2

这可能对您有所帮助。

实时样本HERE

<强> HTML

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

<强> CSS

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

<强> JS

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

Answer 3

你试过了吗？

 .row {
   min-height: 100vh; }

引导程序中的100％高度div

3 个答案: