我正在尝试将一些 DOM 放在一起,但我真的不确定如何解决以下问题。我基本上需要有一个可见的 .filterArea
,并且它上面的区域占用剩余空间。困难在于我希望我的 .filterArea
根据宽度做出响应,但我不知道我预先的总高度。
body {
background-color: #fff;
}
.mainArea {
background: red;
color: white;
}
.filter-area .tags {
padding: 10px;
}
.tag {
margin: 5px;
padding: 5px;
background-color: #f6f6f6;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="mainArea">
<p>
This is the main area
</p>
</div>
<div class="filterArea" data-bind="component: filterComponent">
<div class="filter-area">
<!-- Represent the different tags that can be applied as filters -->
<div class="tags">
<div class="tag" data-tag="lessThan" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Less than</span>
<span class="value" data-bind="dl-siformat: arg1">0</span>
</div>
<div class="tag" data-tag="lessThanOrEqualTo" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Less than or equal</span>
<span class="value" data-bind="dl-siformat: arg1">0</span>
</div>
<div class="tag" data-tag="equals" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Equals</span>
<span class="value" data-bind="dl-siformat: arg0">0</span>
</div>
<div class="tag" data-tag="greaterThan" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Greater than</span>
<span class="value" data-bind="dl-siformat: arg0">0</span>
</div>
<div class="tag" data-tag="greaterThanOrEqualTo" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Greater than or equal</span>
<span class="value" data-bind="dl-siformat: arg0">0</span>
</div>
<div class="tag" data-tag="between" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Between</span>
<span class="value" data-bind="dl-siformat: arg0">0</span>
<span class="name">and</span>
<span class="value" data-bind="dl-siformat: arg1">0</span>
</div>
<div class="tag" data-tag="within" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Within</span>
</div>
<div class="tag" data-tag="empty" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Empty</span>
</div>
</div>
<div class="filters scrollable numberFilters filtersEmpty" data-bind="css: filters().length === 0 ? 'filtersEmpty' : ''">
<div data-bind="dl-filter-scroll-top:$parent"></div>
<div data-bind="template: { foreach:filters,
name: function(item) { return item.func(); },
afterAdd: showFilter,
beforeRemove: hideFilter }"></div>
</div>
</div>
</div>
我见过一些解决方案,但它们都依赖于必须知道 .filterArea
的固定高度。在处理完 .filterArea
之后,我可以应用一些 CSS 魔术来根据剩余空间调整顶部部分的大小吗?
最佳答案
您可以使用 CSS flexbox 和一个使用 vh
单位的容器来使总高度成为视口(viewport)的高度。
body {
background-color: #fff;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.mainArea {
background: red;
color: white;
flex: 1;
}
.filter-area .tags {
padding: 10px;
}
.tag {
margin: 5px;
padding: 5px;
background-color: #f6f6f6;
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="mainArea">
<p>
This is the main area
</p>
</div>
<div class="filterArea" data-bind="component: filterComponent">
<div class="filter-area">
<!-- Represent the different tags that can be applied as filters -->
<div class="tags">
<div class="tag" data-tag="lessThan" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Less than</span>
<span class="value" data-bind="dl-siformat: arg1">0</span>
</div>
<div class="tag" data-tag="lessThanOrEqualTo" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Less than or equal</span>
<span class="value" data-bind="dl-siformat: arg1">0</span>
</div>
<div class="tag" data-tag="equals" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Equals</span>
<span class="value" data-bind="dl-siformat: arg0">0</span>
</div>
<div class="tag" data-tag="greaterThan" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Greater than</span>
<span class="value" data-bind="dl-siformat: arg0">0</span>
</div>
<div class="tag" data-tag="greaterThanOrEqualTo" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Greater than or equal</span>
<span class="value" data-bind="dl-siformat: arg0">0</span>
</div>
<div class="tag" data-tag="between" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Between</span>
<span class="value" data-bind="dl-siformat: arg0">0</span>
<span class="name">and</span>
<span class="value" data-bind="dl-siformat: arg1">0</span>
</div>
<div class="tag" data-tag="within" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Within</span>
</div>
<div class="tag" data-tag="empty" data-bind="click: addTag, dl-filterTagRipple">
<span class="name">Empty</span>
</div>
</div>
<div class="filters scrollable numberFilters filtersEmpty" data-bind="css: filters().length === 0 ? 'filtersEmpty' : ''">
<div data-bind="dl-filter-scroll-top:$parent"></div>
<div data-bind="template: { foreach:filters,
name: function(item) { return item.func(); },
afterAdd: showFilter,
beforeRemove: hideFilter }"></div>
</div>
</div>
</div>
关于html - 根据剩余空间自动调整 Div 大小(占以下 Div),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35206432/