基于其他div动态高度的动态div高度

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

编辑：

给你的DIV自动高度，并自动溢出：

#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/

希望有所帮助。

。