DEV Community

Discussion on: How to make footer stick at the bottom of web page.

View post
Collapse
 
cpmech profile image
Dorival Pedroso •

Good one!

I'd also suggest "display: grid".

For example:

    height: 100vh;
    display: grid;
    grid-template-areas:
      'warning'
      'header'
      'main'
      'footer';
    grid-template-columns: auto;
    grid-template-rows: auto auto 1fr auto;
Enter fullscreen mode Exit fullscreen mode

Where you can also get sticky header and more.

See Gist here: gist.github.com/cpmech/241857a5fe7...

Cheers.