Multiple checkbox div 100% body height

Question

I have a problem to fix the height of a div that has several checkboxes inside, so the height will not be more than 100% of the window (body). I try so many employees, so I do not make decisions. If someone knows some tricks to help me with this, I will be so glad

$(".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 should subtract the height above the p tag ("

Select criteria (criteria)

") from the height of divs that have several checkboxes inside. You can achieve this with jquery. I made a small modification in the 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 to set the html field to display the default 0:

 html, body{ margin: 0 auto; } 

and updated .multiselect with CSS3 to calculate height:

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

Try resizing the screen in the demo, you will see that the height will dynamically change.