CSS網格行最大高度1FR，滾動內容

Question

我使用下面的CSS-網格樣式有一個 '日曆' 佈局：

.calendar { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    grid-template-rows: 1.5em 1.5em repeat(6, 1fr); 
    width: 100%; 
    height: 100%; 
} 

（Codepen https://codepen.io/joelhoward0/pen/vJLmWK）

前兩排是一個「控制「本週頭，隨後的div每一天在每月的頭和天：

<div class="day"> 
    <div class="header">26</div> 
    <div class="content"></div> 
</div> 

每一天都有一個.header和.content股利。我希望.header div佔用行高度的1/5，內容佔用4/5，並在內容溢出時滾動。

但是，我嘗試過的任何樣式組合都會導致.content不斷增長，並縮小其他網格行以進行補償。我認爲這是由於在容器網格模板行上使用了1fr。

是否可以在.content div上實現網格行高度的4/5的最大高度，該高度是可用垂直空間的1/6？

（注：設置overflow-y: auto;上.day達到我想要的，但頭部被包含在滾動區域設置在.contentoverflow-y: auto;似乎並沒有做任何事情。）

Answer 1

它看起來就像你將標題設置爲position: fixed，設置爲calc(100%/7)，併爲其指定一個不透明的background。設置.day到overflow-y:auto，並給你的.content一個margin-top，似乎工作以及保持壓光機流體瀏覽器的高度。

如果標題是有邊界的日子塊的整個寬度你可以添加你當前的邊框屬性，只在右側，添加box-sizing: border-box

.header{ 
    position:fixed; 
    background: white; 
    width: calc(100%/7); 
    border: solid grey; 
    border-width: 0 1px 0 0; 
    box-sizing: border-box; 
} 

.day { 
    border: solid grey; 
    border-width: 0 1px 1px 0; 
    overflow-y: auto; 
} 

.content { 
    margin-top: 20px; 
} 

Demo

Answer 2

每一行是非常重要的在網格中（標題除外）設置爲1fr高度。這意味着每一行將佔用容器中相同比例的可用空間。

請注意，fr尺寸實際上並未定義長度–或者width或height。隨着fr你只是分發自由空間。

但對於overflow屬性工作，實際的高度必須被定義：

爲了overflow有效果，該塊級別的容器必須有一組高度（height或max-height）或white-space設置爲nowrap。

^{源：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}

因此，考慮使用實際高度相對於空間分佈。這裏有一個例子：

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
} 
 

 
.calendar { 
 
    display: grid; 
 
    grid-template-columns: repeat(7, 1fr); 
 
    grid-template-rows: 1.5em 1.5em repeat(6, 175px); /* adjusment */ 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    border: solid grey; 
 
    border-width: 1px 0 0 1px; 
 
    position: relative; 
 
} 
 

 
.dayHeader { 
 
    border: solid grey; 
 
    border-width: 0 1px 1px 0; 
 
} 
 

 
.day { 
 
    height: 175px; /* new */ 
 
    border: solid grey; 
 
    border-width: 0 1px 1px 0; 
 
} 
 

 
.header { /* new */ 
 
    height: 20%; 
 
    background-color: yellow; 
 
} 
 

 
.content { 
 
    height: 80%; /* new */ 
 
    overflow-y: auto; 
 
    background-color: aqua; 
 
} 
 

 
.controls { 
 
    grid-column-start: 1; 
 
    grid-column-end: 8; 
 
    border: solid grey; 
 
    border-width: 0 1px 1px 0; 
 
}

<div class="calendar"> 
 
    <div class="controls">July 2017</div> 
 
    <div class="dayHeader">Sunday</div> 
 
    <div class="dayHeader">Monday</div> 
 
    <div class="dayHeader">Tuesday</div> 
 
    <div class="dayHeader">Wednesday</div> 
 
    <div class="dayHeader">Thursday</div> 
 
    <div class="dayHeader">Friday</div> 
 
    <div class="dayHeader">Saturday</div> 
 
    <div class="day"> 
 
    <div class="header">25</div> 
 
    <div class="content"> 
 
     this is a lot of content that I want to have scroll instead of just stretching the grid row and forcing the other rows to be smaller to compensate for this one's increased size due 
 
    </div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">26</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">27</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">28</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">29</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">30</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">1</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">2</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">3</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">4</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">5</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">6</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">7</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">8</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">9</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">10</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">11</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">12</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">13</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">14</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">15</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">16</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">17</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">18</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">19</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">20</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">21</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">22</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">23</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">24</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">25</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">26</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">27</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">28</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">29</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">30</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">31</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">1</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">2</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">3</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">4</div> 
 
    <div class="content"></div> 
 
    </div> 
 
    <div class="day"> 
 
    <div class="header">5</div> 
 
    <div class="content"></div> 
 
    </div> 
 
</div>

revised demo