How to make the main content div fill height of screen with css

Layout with header and footer

When you're working with header and footer sections, it's a different ball game. Here are two methods to ensure your main content div adjusts correctly:

The Flexbox way

CSS Flexbox comes to the rescue:

body {
   display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header, footer {
    height: 40px; /* Bye bye, scrolling! */
}

.main-content {
    flex-grow: 1; /* Grow, little div! */
}


This grows the content dynamically between the header and footer sections.

The CSS Grid method

CSS Grid is also a worthy opponent in this battle:

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

header {
    grid-row: 1;
}

.main-content {
    grid-row: 2;  /* You own this space! */
}

footer {
    grid-row: 3;
}


The main content is set to grow and push the footer to the bottom, making the footer beg for mercy (forgive the dramatics, but you get the idea).

For the love of footers and dynamic content

Making footers behave

Absolute positioning or flexbox can be used to pin down those footers.

.footer {
    margin-top: auto;  /* Hasta la vista, scrolling! */
}


Or by using absolute positioning:

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;  /* Full-width, baby! */
}


Managing overflowing content

Ensure your content doesn't get too excited and start causing scrollbars due to padding:

.main-content {
    padding-bottom: 40px; /* Leave some space for the footer, content! Be nice!  */
}


In case your contents decide to go beyond the viewport, consider using overflow: auto; to keep them in check:

.main-content {
    overflow-y: scroll;  /* You shall not pass! */
}


Making friends with all browsers

Viewport units in older browsers

Older browsers may get a bit grumpy and not support vh. In these cases, use:

html, body {
    height: 100%;  /* Old school vibes */
}

.main-content {
    min-height: 100%;  /* Because you're worth it */
}


Flexbox and grid fallbacks

For browsers, who are still living in the past and do not support Flexbox or Grid:

.container {
    display: table;  /* Pretending to be a table today */
    width: 100%;
    height: 100%;
}

.header, .footer {
    display: table-row;
    height: 1px; /* Playing hard to get */
}

.main-content {
    display: table-cell;  /* It's not hip, but it works */
    vertical-align: top;
}


This is like doing a rain dance to make Flexbox and Grid work using older CSS properties.

Conversation with multiple devices

Responsive design

Make your content div chameleon-like, adapting to its surroundings. How? Media queries and relative units:

@media screen and (max-width: 768px) {
    .main-content {
        height: auto;  /* In the world of screens, size matters */
        padding-bottom: 60px; /* Make way for the bigger footer */
    }
}


Not-so-friendly UI elements

Mobile browsers, being the special snowflakes that they are, may have UI elements that obscure your content. Fight back with calc():

.main-content {
    height: calc(100vh - 50px); /* 50px for header/footer, because manners cost nothing */
}
