Разрешить CSS Grid расти вертикально с окном, заполняя оставшееся пространство

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

Попробуйте обернуть все это в гибкий контейнер, а затем использовать свойства flex для установки длины.Примерно так:

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 demo

Answer 2

Есть несколько способов сделать это.Один из способов сделать это - использовать vh юнитов.Я создал CodePen с вашим кодом и немного изменил высоту ваших строк в CSS:

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

Это означает, что каждая строка будет занимать 20% вертикального пространстваэкрана минус 17px, что позволяет для заголовка.Это предполагает, что всегда будет пять строк.