Eidolon Eidolon - 3 months ago 30
HTML Question

How to make a grid span the remaining height of the page

I am just trying to create a basic website using Material Design Light that responds to the size of the screen and I am having trouble making the grid fill all of the available height. I have tried to look for solutions to this problem online but I cant find any that work.

Here is the source code for one the grids I will use:

<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
</div>
</main>


Here is a link to the full Html page: Example MDL Page

Here is an image of the problem: Page Example

Answer

I'm assuming that your page height is the view height, which you can only use w/ modern browsers. See view height

Basically what we're doing here is we already know how high our footer and header are going to be (in the fiddle i just set it to 50px each). Then we use the calc CSS property to set the view height (vh) to 100% - 100px (meaning the footer and header's height put together (50+50 = 100)

Check the fiddle

<div id="main-body">
    <div class="header"></div>
    <div class="content clearfix">
        <div class="a">1</div>
        <div class="a">2</div>
        <div class="a">3</div>
        <div class="a">4</div>
    </div>
    <div class="footer"></div>
</div>

* {
    box-sizing: border-box;  /* add for browser prefixes */
}

#main-body {
    height: 100%;
    overflow: hidden;
}
.header, .footer {
    background-color: blue;
    height: 50px;
}
.content .a {
    height: calc(100vh - 100px);
    background-color: red;
    width: 25%;
    float: left;
}

.clearfix:after {
    content: "";
    clear:both;
    display:table;
}

Note that you'll also need the viewport meta tag in your <head> for this to work.

<meta name="viewport" content="width=device-width, initial-scale=1">

OP added the he would like the ability to center the text within these content divs

<div id="main-body">
    <div class="header"></div>
    <div class="content clearfix">
        <div class="a"><p>1</p></div>
        <div class="a"><p>2</p></div>
        <div class="a"><p>3</p></div>
        <div class="a"><p>4</p></div>
    </div>
    <div class="footer"></div>
</div>
#main-body {
    height: 100%;
    overflow: hidden;
}
.header, .footer {
    background-color: blue;
    height: 50px;
}
.content .a {
    height: calc(100vh - 100px);
    background-color: red;
    width: 25%;
    float: left;
    position: relative;
}

.content .a p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.clearfix:after {
    content: "";
    clear:both;
    display:table;
}