Question

我有修复div高度的问题，里面有多个复选框，所以高度不要超过窗口（正文）的100％。我尝试了这么多员工，所以我没有解决方案。如果有人知道一些技巧来帮助我这个，我会非常高兴

＆＃13;

$(".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();
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

选择条件

”）。你可以通过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;
}

并使用CSS3更新.multiselect以计算高度：

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

尝试在演示中调整屏幕大小，您将看到高度将动态变化。

多个复选框div 100％身高

2 个答案: