填滿剩余高度

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; display: flex; flex-direction: column; 並為要占用剩余空間的元素分配不同的flex-grow （權重）。