有div佔用剩餘父分區高度的1/6

Question

我正在嘗試使用css製作簡單的日曆。

我有一個父div將包含日曆，並且我有一個包含「星期一」，「星期二」等標題，並具有固定高度的div。我現在想要添加表示日曆行的div，並將剩餘空間拆分爲六個偶數行。但是，我無法弄清楚如何將REMAINING空間分成6部分。我嘗試的所有東西都會使div div的1/6。

任何提示將不勝感激。

HTML：

<div id="parent> 
    <div id="header"> 
     ST 
    </div> 
    <div class="row"> 
     hi 
    </div> 
</div> 

CSS：

.row{ 
    width:100%; 
    height: 16.66%; 
    background-color:red; 
} 

Answer 1

當您要分發剩餘的由彈性元件留下空間，Flexbox的就是答案。

html, body, #parent { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
#parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#header { 
 
    background-color: green; 
 
} 
 
.row { 
 
    width: 100%; 
 
    flex: 1; /* Distribute remaining space equally among the rows */ 
 
    background-color: red; 
 
} 
 
.row:nth-child(odd) { 
 
    background-color: blue; 
 
}

<div id="parent"> 
 
    <div id="header">Header</div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
    <div class="row"></div> 
 
</div>

Answer 2

有幾種方法可以做到這一點，挑一個我需要知道更多的應該如何使用。

本樣本僅使用CSS calc()並從父母的1/6減去標頭的1/6。

html, body { 
 
    margin: 0; 
 
} 
 
#parent { 
 
    height: 100vh; 
 
} 
 
#header { 
 
    height: 60px; 
 
    background-color:green; 
 
} 
 
.row{ 
 
    height: calc(16.66% - 10px); 
 
    background-color:red; 
 
} 
 
.row:nth-child(odd){ 
 
    background-color:blue; 
 
}

<div id="parent"> 
 
    <div id="header"> 
 
     Header 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
    <div class="row"> 
 
    </div> 
 
</div>