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.