All geek questions in one place

CSS grid height max height 1fr, scroll content

I have a calendar layout using the following css-grid styles:

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

The first two lines are the headings "controls" and the days of the weekly headers, followed by divs for each day of the month:

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

Every day has a div .headerand .content. I want the div to .headeroccupy 1/5 of the height of the line, and the content to occupy 4/5 and scroll if the content overflows.

However, any combination of styles that I tried leads to an increase .content, reduction of other grid lines to compensate. I assume that this is due to the use of a 1frcontainer in the grid-template-container.

4/5 , 1/6 , .content div?

( : overflow-y: auto; .day , , . overflow-y: auto; .content, , -.)

+4
3

( ) 1fr height. , .

, fr & ​​ndash; width, height. fr .

overflow :

overflow , (height, max-height), white-space, nowrap.

source: 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 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>
Hide result

+5

@MichaelB , , , . .

overflow:auto , , overflow:auto .

https://codepen.io/kumarharsh/pen/jejGMm?editors=1100

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, 1fr);
  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 {
  border: solid grey;
  border-width: 0 1px 1px 0;
  overflow: auto; /* added overflow here! */
}

.content {
  overflow-y: auto;
}

.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 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>
Hide result

, ( Firefox, Chrome Edge), , , , .

?

yet, , - .

@Victoria: CSS 1fr, , - , .

+3

It looks like if you set the title to position: fixed, set calc(100%/7)and give it an opaque background. Install .dayin overflow-y:autoand attach .contenta margin-top, which seems to work, and also keep the calendaring fluid at the height of the browser.

If the full width of the daily block with borders is important for the title, you can add your current border properties only to the right side and add 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

+1
source

Source: https://habr.com/ru/post/1682579/

More articles:


All Articles