残りの親のdivの高さの1/6を占めるdiv

Question

私はcssを使って簡単なカレンダーを作ろうとしています。

私は、カレンダーを含む親divを持っており、その中に "Monday"、 "Tuesday"などのヘッダーを含むdivがあり、固定高さです。私はカレンダーの行を表すdivを追加し、残りのスペースを6つの偶数行に分割したいと考えています。しかし、私はどのように6つの部分にREMAININGスペースを分割するのか分かりません。私が試したすべてが、divの1/6thを親divにします。

ヒントをいただければ幸いです。

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

あなたは柔軟な要素によって残された残りのスペースを配布したい場合は、フレキシボックスが答えです。

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>