javascript - 多个复选框 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 {
	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

根据我的说法，你必须从内部有多个复选框的 div 的高度中减去上面 p 标签(“

Select Criteria(s)

”)的高度。你可以通过 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))