How to create div with 100% height of a griid parent with height auto?

[Thallius]

Hi,

I have divided my div in 3 parts. Header part, content part and footer part.

the CSS looks like that:

html:

<div class = "parent">
    <div class = "header"></div>
    <div class = "content">
         <div class = "whatever"></div>
    </div>
    <div class = "footer"></div>
</div>

.parent
{
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: 3rem auto 3rem;

     position relative;
}
.header 
{
        grid-column: 1;
        grid-row: 1;
}
.content 
{
        grid-column: 1;
        grid-row: 2;
}
.footer 
{
        grid-column: 1;
        grid-row: 3;
}

I need to define the class whatever that way, that is has the height of the content div. Is this possible with CSS or do I need to calculate the height in Javascript?

[PaulOB]

Hi @Thallius,

Just to clarify that in your demo above the height of the content div is determined by the height of the content in the whatever div so in essence it is always 100% of .content by default.

e.g.

I think you may be thinking of a use case like the following where the grid is 100% tall and in that case you would need to set .content to display:grid to allow .whatever to match the height of .content.

e.g.

If neither of those are what you want then let me know as I’m sure there is a workaround. I have never needed JS to match a height of a parent since about 2002

[Thallius]

Hi Paul,

sorry my question was stupid. I have found the problem. Its not my best day today.