How to position the bottom-most container in a grid layout

Question

Here's a quick demo of what I have: https://codepen.io/brslv/pen/RwobvgP?editors=1100

So, there's a .container div, which is a grid with grid-template-rows: 100px auto auto.

I need to be able to:

the whole layout should be the height of the screen (100vh), and the middle div should be scrolling, if the content gets too high.
keep the top-most div fixed height
have the middle div span the whole height of the page minus those 100px for the top div and minus the bottom-most div (which should be "fluid" and expand, depending on the height of the contents in it)
as described above, have the bottom-most div expand, depending on the height of the contents in it (in this case an autosize-able text area), but always stay on the bottom of the grid as small as possible, with, let's say min-height: 100px.

So essentially:

|------------------------------------------
| Section A: 100px
|------------------------------------------
|
|
| Section B: 100% - A - C(variable height)
|
|
|------------------------------------------
| Section C: variable height, min: 100px
| (here is the autosizing text-area)
|------------------------------------------

In my demo It's working as expected (https://codepen.io/brslv/pen/RwobvgP?editors=1100). But, if there is only one or two items in the middle div, it breaks, because the middle div isn't high enough and the bottom most compensates it, which is what I want to avoid.

I want to do it css-only, but if it's not possible I'll have to write a small JS to resize the middle one "by hand"...

Any ideas how to approach the problem with css-only?

score 2 · Accepted Answer · answered Jan 29 '21 at 07:47

You can change your css code and make it:

    .container {
       height: 100vh;
       display: grid;
       grid-template-rows: 100px 1fr auto;
    }

What do you want is the 1fr. In this way the middle div will fill all the available empty space. See here for details about the fr unit: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit

How to position the bottom-most container in a grid layout

1 Answers1