multiple checkbox div 100% height of body

Question

I have problem to fix height of div that have multiple checkboxes inside, so the height dont be more then 100% of window (body). I try so many staff so im out of solutions. If someone know some tricks to help me with this one, i will be so much pleased

$(".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">
            <label>Green
                <input type="checkbox" name="option[]" value="1" />
            </label>
            <p>Heading</p>
            <label>Green
                <input type="checkbox" name="option[]" value="1" />
            </label>
            <label>Red
                <input type="checkbox" name="option[]" value="2" />
            </label>
            <label>Blue
                <input type="checkbox" name="option[]" value="3" />
            </label>
            <label>Orange
                <input type="checkbox" name="option[]" value="4" />
            </label>
            <label>Purple
                <input type="checkbox" name="option[]" value="5" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="6" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="7" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="8" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="9" />
            </label>
            <p>Heading</p>
            <label>Green
                <input type="checkbox" name="option[]" value="1" />
            </label>
            <label>Red
                <input type="checkbox" name="option[]" value="2" />
            </label>
            <label>Blue
                <input type="checkbox" name="option[]" value="3" />
            </label>
            <label>Orange
                <input type="checkbox" name="option[]" value="4" />
            </label>
            <label>Purple
                <input type="checkbox" name="option[]" value="5" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="6" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="7" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="8" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="9" />
            </label>
            <p>Heading</p>
            <label>Green
                <input type="checkbox" name="option[]" value="1" />
            </label>
            <label>Red
                <input type="checkbox" name="option[]" value="2" />
            </label>
            <label>Blue
                <input type="checkbox" name="option[]" value="3" />
            </label>
            <label>Orange
                <input type="checkbox" name="option[]" value="4" />
            </label>
            <label>Purple
                <input type="checkbox" name="option[]" value="5" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="6" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="7" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="8" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="9" />
            </label>
            <p>Heading</p>
            <label>Green
                <input type="checkbox" name="option[]" value="1" />
            </label>
            <label>Red
                <input type="checkbox" name="option[]" value="2" />
            </label>
            <label>Blue
                <input type="checkbox" name="option[]" value="3" />
            </label>
            <label>Orange
                <input type="checkbox" name="option[]" value="4" />
            </label>
            <label>Purple
                <input type="checkbox" name="option[]" value="5" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="6" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="7" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="8" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="9" />
            </label>
            <p>Heading</p>
            <label>Green
                <input type="checkbox" name="option[]" value="1" />
            </label>
            <label>Red
                <input type="checkbox" name="option[]" value="2" />
            </label>
            <label>Blue
                <input type="checkbox" name="option[]" value="3" />
            </label>
            <label>Orange
                <input type="checkbox" name="option[]" value="4" />
            </label>
            <label>Purple
                <input type="checkbox" name="option[]" value="5" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="6" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="7" />
            </label>
            <label>Black
                <input type="checkbox" name="option[]" value="8" />
            </label>
            <label>White
                <input type="checkbox" name="option[]" value="9" />
            </label>
        </div>
    </div>
</div>

Answer 1

According to me you have to subtract the height of above p tag("

Select Criteria(s)

") from the height of div that have multiple checkboxes inside. You can achieve this by jquery. I have done small modification in code here

$(".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();
});
var getMultiSelectHeight = $(".multiselect").height();
$(".multiselect").height(getMultiSelectHeight-($(".selectText").outerHeight(true)+20))

Answer 2

There is one solution with CSS. See demo here.

I add below for setting the default html viewport margin 0:

html, body{
     margin: 0 auto;
}

and updated .multiselect with CSS3 to calculate the height:

height: calc(100% - 50px); // 50px is <p>'s height including margin

Try to resize the screen in the demo, you will see the height will change dynamically.