100 высота в гнезде div

Question

Я застрял на этой проблеме. http://arenda2.herokuapp.com/catalog Когда я использую select box, jQuery add second select box ang height изменяется. Прокруточный борд должен быть в одной строке с картой.

Мои примеры 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 высота должна использовать высоту сиденья, но не выходит из кадра 100 ВХ

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