css - 让 div 占据剩余父 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>