在子元素高度上更改父母div高度

Question

I have div page and inside that div I have bootstrap multiselect container

<div class="content clearfix">
   <ul class="multiselect-container dropdown-menu">
       <li> ...</li>
   </ul>
</div>

problem is that when there are many list items inside this multiselect element it stays hidden under parent div. How can I dynamically change parent div height as multiselection container element height change?

I tried already with

.content.clearfix {
    height:auto;
}

but that doesn't helped

Answer 1

Try JS to set height dynamically as per your multi-list element height. Check if it can help to you. I just put this code inside setTimeout because in case your li elements are taking time to load on page. Please try without setTimeout function first.

 $(document).ready(function(){ setTimeout(function(){ var multiselectHeight=$('.multiselect-container').height(); $('.content').height(multiselectHeight); },1000); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content clearfix"> <ul class="multiselect-container dropdown-menu"> <li> ...</li> </ul> </div>