Search code examples
htmlcssheaderfootervertical-alignment

Sticky header and footer while vertical-aligning content to center

I'm trying to achieve the solutions for sticky header and footer from here, and centering content vertically from here.

However I'm unable to get the content centered.

Here's my experiment.

Should I use a simple table instead?

Solution

  • You can achieve it using "calc" and "Flexbox" instead of using table. But it may require some css skill since flex-box is quite new.

    Check out this link - http://liveweave.com/5a83eG

    Since I'm new in stackoverflow, I can't post more than 2 links. I guess you may google more details about "calc" and "flexbox".