html - 基于其他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

您最好使用 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

也是一个 fiddle ，所以你可以改变高度: http://jsfiddle.net/abhitalks/96h4wmkf/3/

希望对您有所帮助。

.