несколько checkbox div 100% высота тела

Question

У меня есть проблема, чтобы исправить высоту div, у которой есть несколько флажков внутри, поэтому высота не будет больше 100% окна (тела). Я стараюсь так много сотрудников, поэтому я не принимаю решения. Если кто-нибудь знает какие-то приемы, чтобы помочь мне с этим, я буду так рад

$(".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 { 
 
\t background-color: #f6f6f6; 
 
\t width: 200px; 
 
\t padding: 0 8px 10px 10px; 
 
\t border: solid 1px #c0c0c0; 
 
\t position: fixed; 
 
\t height: 100%; 
 
} 
 
.multiselect { 
 
\t width: 200px; 
 
\t height: 100%; 
 
\t overflow:auto; 
 
\t border: solid 1px #c0c0c0; 
 
\t background-color: #fff; 
 
} 
 
.multiselect label { 
 
\t display:block; 
 
\t cursor: pointer; 
 
\t padding: 4px 10px; 
 
} 
 
.multiselect input { 
 
\t float: right; 
 
\t cursor: pointer; 
 
} 
 
.multiselect p { 
 
\t padding-left: 5px; 
 
} 
 
.open, .close { 
 
\t padding: 10px; 
 
\t position: absolute; 
 
\t right: -81px; 
 
\t width: 100px; 
 
\t top: 40px; 
 
\t background-color: #f6f6f6; 
 
\t border: 1px solid #c0c0c0; 
 
\t border-top-color: #f6f6f6; 
 
\t transform: rotate(-90deg); 
 
\t cursor: pointer; 
 
\t -webkit-border-bottom-right-radius: 5px; 
 
\t -webkit-border-bottom-left-radius: 5px; 
 
\t \t -moz-border-radius-bottomright: 5px; 
 
\t \t -moz-border-radius-bottomleft: 5px; 
 
\t \t \t border-bottom-right-radius: 5px; 
 
\t \t \t 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

По мне нужно вычесть высоту над р теге (»

Выбор критериев (s)

") с высоты div, в которой есть несколько флажков. Вы можете добиться этого с помощью jquery. Я сделал небольшие изменения в коде 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

Существует одно решение с помощью CSS. См. Демо here.

добавить ниже для настройки HTML по умолчанию край окна проекции 0:

html, body{ 
    margin: 0 auto; 
} 

и обновленный .multiselect с CSS3, чтобы вычислить высоту:

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

Попробуйте изменить размер экрана в демо-версии, вам увидит, что высота изменится динамически.