最大高度100％溢出父母

Question

我有一个使用bootstrap的列表组，其中包含很多项目。我将以下css规则应用于list-group 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中，如下所示。

如何使我的列表组不会溢出我的＃body-content-menu div，它具有以下css规则，同时仍然允许它响应。

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

Answer 1

首先，你必须在你的页面中有一个jquery链接（也许bootstrap将它添加到你的页面）。然后，您需要为div class="row"设置ID，例如为id="row设置id，为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>