最大高度100％父級溢出

Question

我有一個使用引導程序的列表組，其中包含很多項。 我將以下CSS規則應用於列表組div的ID。

#my-listgroup {
    margin-top: 20px;
    border-radius: 6px;
    overflow-y: scroll;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}

現在，該div被包裝在其他兩個div中，如下所示。

我如何使我的列表組不會溢出具有以下CSS規則的＃body-content-menu div，同時仍然允許其響應。

#body-content-menu {
    border-radius: 10px;
    height: 100%;
    background-color: #B21E15;
    padding-bottom: 20px;
}

Answer 1

首先，您的頁面中必須有一個jquery鏈接（也許引導程序將其添加到您的頁面中）。 然后，您需要為div class="row"設置一個id，例如id="row並為div class="col-lg-12"設置另一個id，例如id="col" 。

現在：

var realHeight = $('#col').height() - $('#row').height();
$('#my-listgroup').css('height', realHeight + 'px');

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <div id="col" style="height:100px;background-color:red;margin:100px;"> <div id="row" style="height:40px;">div row</div> <select id="my-listgroup" size="4" name="ctl02" style="max-height: 100%;"> <option value="item">item</option> <option value="item">item</option> <option value="item">item</option> <option value="item">item</option> <option value="item">item</option> <option value="item">item</option> </select></div> <script> var realHeight = $('#col').height() - $('#row').height(); $('#my-listgroup').css('height', realHeight + 'px'); </script>