允许CSS网格随窗口垂直增长，填充剩余空间

Question

我想增长一个网格来填充剩余的垂直空间。固定高度的日历上方有几个

div

，我希望它们保持固定高度。当窗口垂直增长时，我只想更改日历，每行均匀增长，停在窗口底部，没有滚动条。

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

html,
body {
  background: #92bde7;
  color: #485e74;
  font-family: Tahoma, Geneva, Verdana, sans-serif;
  height: 100%;
}

.selection {
  padding: 5px;
}

.header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.header>div {
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* this is the element that needs to stretch to remaining available window space */

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}


/* these elements should stretch evenly as the window grows */

.calendar>div {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.5em;
  min-height: 100px;
}

.prev>div,
.next>div,
.date>div {
  text-align: left;
}

.prev,
.next {
  background: #c9e6ff;
  color: #666;
}

.date {
  background: #f9feff;
}

<div class="selection">
  <h1><a class="back">&#10094;</a> 6 / 2018 <a class="forward">&#10095;</a></h1>
</div>
<div class="header">
  <div>Sunday</div>
  <div>Monday</div>
  <div>Tuesday</div>
  <div>Wednesday</div>
  <div>Thursday</div>
  <div>Friday</div>
  <div>Saturday</div>
</div>
<div class="calendar">
  <div class="prev">30</div>
  <div class="prev">31</div>
  <div class="date">1
    <div class="item">Stuff to do...</div>
  </div>
  <div class="date">2</div>
  <div class="date">3</div>
  <div class="date">4</div>
  <div class="date">5</div>

  <div class="date">6</div>
  <div class="date">7</div>
  <div class="date">8</div>
  <div class="date">9</div>
  <div class="date">10</div>
  <div class="date">11</div>
  <div class="date">12</div>

  <div class="date">13</div>
  <div class="date">14</div>
  <div class="date">15</div>
  <div class="date">16</div>
  <div class="date">17</div>
  <div class="date">18</div>
  <div class="date">19</div>

  <div class="date">20</div>
  <div class="date">21</div>
  <div class="date">22</div>
  <div class="date">23</div>
  <div class="date">24</div>
  <div class="date">25</div>
  <div class="date">26</div>

  <div class="date">27</div>
  <div class="date">28</div>
  <div class="date">29</div>
  <div class="date">30</div>
  <div class="next">1</div>
  <div class="next">2</div>
  <div class="next">3</div>
</div>

Answer 1

尝试将整个东西包装在一个柔性容器中，然后使用柔性属性来设置长度。像这样的东西：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
    
.selection {
  flex: 0 0 50px; /* flex-grow, flex-shrink, flex-basis */
}
   
.header {
  flex: 0 0 25px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
    
.calendar {
  flex: 1; /* dynamic length; consumes all remaining space */
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
}

jsFiddle 演示

Answer 2

有多种方法可以实现这一点。一种方法是利用

vh

单位。我用你的代码制作了一个CodePen，并对CSS中的行高度进行了轻微调整：

.calendar > div {
    ...
    height: calc(20vh - 17px)
}

这意味着每行将占据屏幕垂直空间的 20% 减去 17px，这可以容纳标题。这假设总是有五行。