The sidebar contains a search field, two lists, and a text div. The height of the search field and text div always remains constant, while the heights of the two lists vary dynamically.
I am exploring the possibility of using only CSS to make the height of the first div responsive. This would involve adjusting its height based on the browser window size and the content in the second list. The second list can have anywhere from 0 to 20 items with a maximum height of 40% of the entire page.
<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;
}
For a demonstration, I have put together a plunkr showcasing this concept.