Динамическая высота div на основе других динамических высот divs

Question

У меня есть боковая панель с полем поиска, двумя списками и текстовым div. Высота поля поиска и текстового div всегда одна и та же, но высоты двух списков неизвестны (что означает их изменение).

Интересно, есть ли какой-то способ, только с CSS, сделать высоту первого динамического div, поэтому он изменяется в зависимости от высоты окна браузера и высоты/количества элементов в списке секунд. Во втором списке может быть от 0 до 20 элементов в нем с максимальной высотой 40% от всей высоты страницы.

<style> 
    body, html { 
     height: 100 % ;margin: 0;padding: 0; 
    } 

    ul { 
     list - style: none; 
     margin: 0; 
     padding: 0; 
    } 

    #sidebar { 
     max - height: 100 % ; 
     overflow: hidden; 
     width: 300 px; 
    } 

    #inputContainer { 
     height: 50 px; 
     max - height: 50 px; 
     overflow: hidden; 
     background: #eee; 
    } 

    #firstList 
    { 
     background: #ddd 
    } 

    #secondList 
    { 
     width: 100 % ; 
     background: #bbb; 
     position: absolute; 
     bottom: 120 px; 
     width: 300 px; 
    } 

    #firstList ul 
    { 
     max - height: 230 px; /*THIS SHOULD NOT BE A STATIC NUMBER*/ 
     overflow - y: scroll; 
    } 

    #secondList ul 
    { 
     overflow - y: scroll 
     max - height: 40 % ; 
     min - height: 200 px; 
    } 

    #otherBox 
    { 
     position: absolute; 
     bottom: 0 px; 
     background: #333; 
      color:# fff; 
     height: 100 px; 
     width: 300 px; 
    } 

Я создал plunkr, чтобы продемонстрировать, что я хотел бы сделать.

Answer 1

Просто установите пропорциональный heigth для каждого элемента, например, установить следующие heigths для ваших элементов:

#inputContainer{ 
    height:5%; 
... 
} 

#firstList ul{ 
    height:40%; 
... 
} 

#secondList ul{ 
    max-height:40%; 
... 
} 

#otherBox{ 
    ... 
    height:15%; 
} 

EDIT:

Дайте ДИВ в высоту авто и и авто переполнения:

#firstList ul{ 
    max-height:230px; /*THIS SHOULD NOT BE A STATIC NUMBER*/ 
    overflow:auto; 
    height:auto; 
    } 

Answer 2

Вы бы лучше использовать flex модель для этого.

Соответствующий CSS:

#sidebar { 
    height:100%; overflow:hidden; width:300px; 
    display: flex;   /* Make the container a flex box */ 
    flex-direction: column; /* Children will flow in column */ 
} 
#inputContainer { 
    flex: 1 1 50px;   /* can grow, can shrink, accommodate in 50px */ 
    background:#eee; 
} 
#firstList{ 
    flex: 1 1 100%;   /* can grow, can shrink, can go upto 100% if available */ 
    background:#ddd; 
    overflow-y:scroll; 
} 
#secondList{ 
    flex: 0 0 20%;   /* cannot grow, cannot shrink, fixed at 20% */ 
    background:#bbb; 
    overflow-y:scroll; 
}  
#otherBox{ 
    flex: 0 0 100px;   /* cannot grow, cannot shrink, fixed at 100px */ 
    background:#333; color:#fff; 
    overflow: hidden; 
} 

Я обновил свой Plunker здесь: http://plnkr.co/edit/oVB5Mbu4nU58UjYBFPpC?p=preview

Также Скрипки, так что вы можете изменить высоту: http://jsfiddle.net/abhitalks/96h4wmkf/3/

Надеюсь, что это поможет.

.