How to have a div that has 100% height and overflow scroll - html

Question

I'm trying to have a 100% div height so that based on the variety on screen sizes it looks good, but then I need the ul to be scrollable if the content is to large and will not fit in the screen.
HTML
<div id="category_modal_body" class="modal-body">
<div id="category_filters" class="row">
<div id="category_list" class="col-md-4">
<ul>
<li> ... </li>
</ul>
</div>
</div>
</div>
<div id="category_modal_footer" class="modal-footer">
<div id="category_selected_path"></div><div id="category_footer_buttons">
<button type="button" id="add_another_category">Tjeter</button>
<button type="button" id="add_category_path">Përfundo</button>
</div>
</div>
CSS:
#category_modal_body #category_list{
padding: 0;
height: 100%
}
#category_modal_body #category_list ul{
list-style: none;
padding: 0;
margin: 0;
height:100%;
overflow:scroll;
}
This is the result I got:
So u can see how the last buttons go over the div.
How can I fix this?

Answer 1

First thing I would try is putting category_modal_footer div inside category_modal_body div, like this:
<div id="category_modal_body" class="modal-body">
<div id="category_filters" class="row">
<div id="category_list" class="col-md-4">
<ul>
<li>...</li>
</ul>
</div>
</div>
<div id="category_modal_footer" class="modal-footer">
<div id="category_selected_path"></div>
<div id="category_footer_buttons">
<button type="button" id="add_another_category">Tjeter</button>
<button type="button" id="add_category_path">Përfundo</button>
</div>
</div>
</div>