div占据剩余父div高度的1/6

Question

我正在尝试使用css创建一个简单的日历。

我有一个包含日历的父div，我在其中有一个div，其中包含标题为＆＃34; Monday＆＃34;，＆＃34; Tuesday＆＃34;等等，并且具有固定高度。我现在想要添加代表日历行的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的标题。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;