max-height 100% переполняющий родительский

Question

У меня есть группа списка, использующая bootstrap, с множеством элементов в ней. Я применил следующие правила CSS для идентификатора моего div-группы.

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

Теперь этот div завернут в пару других div, как показано ниже.

как мне сделать мой listgroup не переполнить мой #-содержимого меню тела DIV, который имеет следующие правила CSS, в то же время позволяя это реагировать.

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

Answer 1

Во-первых, у вас должна быть ссылка jquery на вашей странице (возможно, bootstrap добавьте ее на свою страницу). Затем вам нужно установить идентификатор для div class="row", например id="row и еще один идентификатор для div class="col-lg-12" например 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;"> 
 
\t <div id="row" style="height:40px;">div row</div> 
 
\t <select id="my-listgroup" size="4" name="ctl02" style="max-height: 100%;"> 
 
\t 
 
\t <option value="item">item</option> 
 
\t <option value="item">item</option> 
 
\t <option value="item">item</option> 
 
\t <option value="item">item</option> 
 
\t <option value="item">item</option> 
 
\t <option value="item">item</option> 
 

 
</select></div> 
 
<script> 
 
    var realHeight = $('#col').height() - $('#row').height(); 
 
    $('#my-listgroup').css('height', realHeight + 'px'); 
 
</script>