Turning Pro

Source

grid:

body {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}

body>* {
padding: 0.5em;
border: solid;
margin: 2px;
}

/* does it push footer down if too tall */

main:hover {
padding-bottom: 100%;
}
—
<headerp>headerp></headerp>
<mainp>main</mainp>
<footerp>footer</footerp>
—

flex:

body {
margin: 0;
min-height: 100vh;
display: flex;
flex-flow: column;
}

main {
flex-grow: 1;
}

body>* {
padding: 0.5em;
border: solid;
margin: 2px;
}

/* does it push footer down if too tall */

main:hover {
padding-bottom: 100%;
}

—
<headerp>header</headerp>
<mainp>main</mainp>
<footerp>footer</footerp>
—