两排布局仅适用于CSS

我需要创建一个网页的2行布局，以管理求过滤器和其他部分为具有以下特征的结果的部分：两排布局仅适用于CSS

页面无法溢出的高度100％
第一行的高度是基于他的内容（可以是可变的，并且一个javascript函数可以通过隐藏某些元素来改变它）
第二行的高度是100％和高度之间的差值第一排
in t他第二排与溢出的div必须是一个带班“名单”，我不能移动它带有class =“结果”来div的（这将使它工作）

HTML：

<div class="main"> 
    <div class="filter"> 
     <div class="filtercontent"> 
      filter content 
     </div> 
    </div> 
    <div class="result"> 
     <div class="resultcontent"> 
      <div class="list"> 
       <div class="listcontent"> 
        list content  
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.main { 
    height: 100%; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
} 

.filter { 
    width: 100%; 
} 

.result { 
    width: 100%; 
} 

.resultcontent { 
    height: 100%; 
    width: 100%; 
} 

.list { 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
} 

.listcontent { 
    height: 1000px; 
    width: 2000px; 
}

我试着用Flexbox的（以不同的方式），但我无法找到最后一个点的解决方案。

重要提示：我无法使用javascript设置行的高度。我需要一个只使用CSS的解决方案。

谢谢！

来源

2017-02-14 Fabio

如果使用“flex：1”属性声明.result div，则它将占用外部div（.main）中剩余的所有空间。因此，如果.filter div占用500个高度像素，则.result将在填充100％的空白空间中调整。如果您动态更改它隐藏或添加元素flex：1将保证所有剩余的空间将自动填充.result。

希望它有帮助

来源

2017-02-14 15:28:06

感谢您的回答。我已经尝试设置“flex：1”，但他的孩子（身高：100％）无法检测到他父母的真实身高 – Fabio

这是因为这种形式的属性声明（带有百分比）总是相对于其父母，始终通过根元素“级联”。如果你将高度：100％设置为html和body元素，并且溢出：隐藏到.main类，你应该很好去。 –

两排布局仅适用于CSS

回答

相关问题