I will reference this example: http://codepen.io/KenPowers/pen/CwoKc?editors=110
My desired result is (when the screen width is at least 800 pixels) stretches the middle “line”, so that the header is at the top and the footer is at the bottom. I would like to do this without adding HTML markup.
Currently, the example is displayed as such:
Adding the following code:
html, body {
width: 100%;
height: 100%;
}
The results are as follows:
Finally, installing max-heightfrom footerand headeronto something like this 50pxleads to the following:
How can I make the middle line stretch to fill all the space on the page? I feel like I've tried all the possible combinations align-content, align-itemsand align-selfto no avail.