html - max-height 100% overflowing parent -
i have list-group using bootstrap, lot of items in it. applied following css rules id of list-group div.
#my-listgroup { margin-top: 20px; border-radius: 6px; overflow-y: scroll; max-height: 100%; max-width: 100%; width: auto; height: auto; }
now div wrapped in couple of other divs, shown below.
how make listgroup not overflow #body-content-menu div has following css rules, while still allowing responsive.
#body-content-menu { border-radius: 10px; height: 100%; background-color: #b21e15; padding-bottom: 20px; }
firstly must have jquery link in page(maybe bootstrap add page). need set id div class="row"
example id="row
, id div class="col-lg-12"
example id="col"
.
now:
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>
Comments
Post a Comment