html - Dynamic div height based on other divs dynamic heights -

i have sidebar search field, 2 lists , text div. height of search field , text div same heights of 2 lists unknown (meaning change).

i wonder if there way, css, make height of first div dynamic changes depending on height of browser window , height/number of items in seconds list. second list have anywhere between 0 , 20 items in max-height of 40% of entire page height.

<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 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;    } 

i've created plunkr demonstrate do.

just set proportional heigth every element, example set following heigths elements:

#inputcontainer{     height:5%; ... }  #firstlist ul{     height:40%;  ... }  #secondlist ul{     max-height:40%; ... }  #otherbox{     ...     height:15%; } 

edit:

give div auto height , and auto overflow :

#firstlist ul{     max-height:230px; /*this should not static number*/     overflow:auto;     height:auto;   }