填满剩余高度

Question

填充页面内剩余高度的首选模式是什么。 例如。

        <div class="container">
            <div class="fixed-height1"></div>
            <div class="remaining-height1">
               <div class="fixed-height2"></div>
               <div class="remaining-height2">
                   <div class="fixed-height3"></div>
                   <div class="remaining-height3">
                   </div> 
               </div> 
            </div> 
        </div>

Answer 1

看看flexbox。

每个包装器元素都有一个display: flex; flex-direction: column;，您可以为要占用剩余空间的元素分配不同的flex-grow（权重）。