Question

我正在尝试将数据快速查看器放在一起。我需要3个单元格...一个标题和两列（我正在使用Bootstrap）。我希望这两列能够彼此独立滚动。我将使用垂直数据填充左列，当选择一个项目时，我将使用它来填充更多垂直数据的右列......

我也不会总是知道标题的高度。我现在正在处理这个问题：

html, body {
    height: 100%;
}

.full-height {height: 100%;}

和

<div class='container-fluid full-height'>
    <div class='row'>
        <div class='col-md-12' id='headerContent'>
        </div>
    </div>
    <div class='row full-height'>
        <div class='col-md-6 full-height' id='events'></div>
        <div class='col-md-6 full-height' id='archive'></div>
    </div>
</div>

这是我迄今为止最接近的。当我这样做时，我的列是容器高度的100％（没有将标题放入帐户）并且挂起比屏幕略长。

**我现在正在尝试使用flexbox，但它引起了一些我不喜欢的其他funkiness ...添加flexbox使得标题div突然变得稍微小一点，以至于它的数据溢出（我不想那样）

Answer 1

如果您不想使用flexbox，可以使用一些简单的jquery来获得正确的高度

<强> HTML：

<div class='container-fluid'>
    <div class='row'>
        <div class='col-md-12' id='headerContent'>
        </div>
    </div>
    <div class='row full-height'>
        <div class='col-md-6 full-height' id='events'></div>
        <div class='col-md-6 full-height' id='archive'></div>
    </div>
</div>

<强> CSS：

html, body {
    height: 100%;
}

#headerContent { 
    background-color: red;
    height: 45px;
}

.full-height {height: 100%; background-color: #ddd; }

.col-md-6 {
    width: 50%;
    float: left;
}

#archive {
    background-color: #666;
}

<强> JS：

$(function() {
        var full_height = $('body').height() - $('#headerContent').height();
        $('.full-height').height(full_height);
    });

小提琴：https://jsfiddle.net/azuh6fb2/

Answer 2

如果你的问题是js异步，你可以使用deferred或promise with jQuery来执行karanmhatre对你说的full_height函数。

http://api.jquery.com/?s=promise

http://api.jquery.com/jQuery.when

http://api.jquery.com/jQuery.Deferred

祝你好运！

使用div中的滚动条和标题设置全屏div的高度

2 个答案: