html - 允许 CSS Grid 随窗口垂直增长,填充剩余空间
问题描述
我想增长一个网格来填充剩余的垂直空间。在固定高度的日历上方有几个div
s,我希望它们保持固定高度。随着窗口垂直增长,我只想改变日历,每行均匀增长,在窗口底部停止,没有滚动条。
* {
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">❮</a> 6 / 2018 <a class="forward">❯</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>
解决方案
尝试将整个 a 包裹在一个 flex 容器中,然后使用 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 演示
推荐阅读
- android - 任务':react-native-background-timer:processReleaseResources'的执行失败
- php - 如何使用 Laravel 更新 Firebase 中的特定列?
- r - 无法使用 lrm 函数拟合惩罚逻辑回归模型
- python-3.x - 如何对每个示例具有二维信息的训练数据进行归一化
- tcl - 如何创建多维散列结构
- docker - 如何在 Sentry 中配置 SMTP 设置?
- c# - 'an' 是一个意外的标记。预期的标记是'='
- javascript - Laravel dropzone.js 未使用模板定义
- c# - 使用任意数字键和对象数组值解析嵌套字典
- ocmock - 如何使用 OCMock 对带有响应块的类方法进行存根