如何使响应div高度？

Question

你知道如何使div中的高度响应吗？在第一张照片是全屏模式，这是非常完美的。但是当我调整屏幕大小时（在第二张图片中），由于div编号“2”的高度，div编号“1”和div编号“3”之间有一个很大的空格。对于您的信息，我使用bootstrap。
这是我的div代码：
div 1 = <div class="col-md-9 col-sm-9 col-xs-9" style="background-color:white;">
div 2 = <div class="col-md-3 col-sm-3 col-xs-3" align="middle" style="background-color:white;">
div 3 = <div class="row" style="background-color:white; bottom:0;" width="100%">
div 1和div 2位于一个div <div class="row" style="background-color:white;">中 div <div class="container-fluid"上的所有div我希望当我调整屏幕大小时，它仍然像全屏模式一样，没有空格。

Answer 1

问题是你的div号码与你的div号码在同一行。所以他们两行的行必须和最高的一行一样高。

要解决此问题，您可以在div编号1的列中创建一行，并将他们的div列为div 1和div 3。

所以看起来像这样

<row>
<col 1>
<row>
<col>
div 1 here
</col>
</row>
<row>
<col>
div 3 here
</col>
</row>
</col1>
<col 2>
div 2 here
</col 2>
</row>

然而，这意味着您的横幅广告只会传播到屏幕的一半。

Answer 2

如果你使用jQuery，你可以做这样的事情

$(window).on('resize', function()
{
    // NOTE: You will need to give your divs ids.
    // I have given div 1 id = "div-1" and div 2 id = "div-2" for the purpose of this answer.
    var height = $('#div-1').height();
    $('#div-2').css('height', height);
});

将要做的是将右侧div的高度设置为左侧div的高度，以使它们具有相同的高度。您也可以输入字体大小和字母间距等内容。