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

也是小提琴，所以你可以改变身高： http://jsfiddle.net/abhitalks/96h4wmkf/3/

希望有所帮助。

Answer 2

只需为每个元素设置一个比例高度，例如为您的元素设置以下高度：

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

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

2 个答案: