基於其他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/

希望有所幫助。

。