多选框div高度占据整个页面的100%。

Question

我有一个问题，需要固定包含多个复选框的div元素的高度，使其不超过窗口（body）的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>

- Stefan

Answer 1

根据我个人的理解，您需要从包含多个复选框的 div 高度中减去上述 p 标签（“

选择条件

”）的高度。您可以通过使用 jQuery 实现此目标。我已经在代码中进行了小的修改，请查看这里。

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

- user1162084

---

当我在项目中导入HTML和CSS时，我进行了一些修改，所以不是使用$(".multiselect").height(getMultiSelectHeight-($(".selectText").outerHeight(true)+20))，而是像这样添加：$("#multiselect-wrap").height(getMultiSelectHeight-($(".selectText").outerHeight(true)+10))。我这么做的原因是因为CSS与我发布的不同。感谢您快速的回答。 - Stefan

Answer 2

有一种使用CSS的解决方案。请查看此处的演示。

以下是设置默认HTML视口边距为0的附加内容：

html, body{
     margin: 0 auto;
}

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

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

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

- North