嵌套div中的高度為100

Question

我被這個麻煩困住了。 http://arenda2.herokuapp.com/catalog當我使用選擇框時，jQuery添加第二個選擇框ang高度會發生變化。 滾動坐標線必須與地圖成一行。

我的例子https://jsfiddle.net/nsykfx7o/

HTML：

<div class="left">
    <div class="filter">
        <p> Some text </p>
    </div>
    <div class="list">
        <p> Some other text </p>        
    </div>
</div>

CSS：

html {
    height: 100%;
    background-color: grey;
}
body {
    margin: 0;
}
.left {
    width: 300px;
    height: 100vh;
    background-color: red;
}

p  {
    margin:0;
    padding:0;
}
.filter {
    background-color: yellow;
}

.list {
    overflow-y: scroll;
    height: 100%;
}

在.filter中，高度必須是自動的，具體取決於內容。 .list height必須使用其余高度，但不能超出框架100 vh

Answer 1

不知道我是否理解正確，但是您將需要JavaScript。 我已經更新了JSFiddle

這是JavaScript代碼（在jQuery中）：

$(document).ready(function() {
    $('.list').css('height', $(window).height()-$('.filter').height());
});

Answer 2

這是給您的修復程序https://jsfiddle.net/n5avavtz/1/

基本上我所做的就是將高度點更改為百分比。 還將overflow-y更改為auto