I'm struggling to limit the height of a div containing multiple checkboxes so that it doesn't exceed 100% of the window's height. I've tried numerous solutions but haven't found one that works. If anyone has any tips or tricks to help me with this issue, I would greatly appreciate it.
$(".open").on("click", function () {
$("#multiselect-wrap").animate({
left: 0
});
$(".open").hide();
$(".close").show();
});
$(".close").on("click", function () {
$("#multiselect-wrap").animate({
left: -220
});
$(".open").show();
$(".close").hide();
});#multiselect-wrap {
background-color: #f6f6f6;
width: 200px;
padding: 0 8px 10px 10px;
border: solid 1px #c0c0c0;
position: fixed;
height: 100%;
}
.multiselect {
width: 200px;
height: 100%;
overflow:auto;
border: solid 1px #c0c0c0;
background-color: #fff;
}
.multiselect label {
display:block;
cursor: pointer;
padding: 4px 10px;
}
.multiselect input {
float: right;
cursor: pointer;
}
.multiselect p {
padding-left: 5px;
}
.open, .close {
padding: 10px;
position: absolute;
right: -81px;
width: 100px;
top: 40px;
background-color: #f6f6f6;
border: 1px solid #c0c0c0;
border-top-color: #f6f6f6;
transform: rotate(-90deg);
cursor: pointer;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multiselect-wrap">
<p>Select Criteria(s)</p>
<div class="open">Show Options</div>
<div class="close">Hide Options</div>
<div class="multiselect">
<div class="content">
/*Checkboxes and labels*/
</div>
</div>
</div>