How to Force the Footer to the Bottom of the Page Using the calc() Function

On websites with little content, it often happens that the footer doesn\'t stay at the bottom of the screen but sticks immediately below the content, leaving an ugly empty space at the bottom. Using the CSS calc() function and vh (view-height) units, we can solve this quickly without using complex frameworks.

Solution Logic

The idea is simple: the content part of the page must have a minimum height equal to the total screen height minus the height of the header and footer.

Code Example

Assuming your header has a height of 80px and the footer 100px, we will set the main content area as follows:

header {
    height: 80px;
}

main {
    /* 100vh is the total screen height */
    min-height: calc(100vh - 180px);
}

footer {
    height: 100px;
}

Why use calc()?

• Flexibility: The function allows mixing different units (e.g., percentages and pixels).
• Responsiveness: Since we use 100vh, the height will automatically adjust regardless of whether the user views the page on a large monitor or a small phone.
• Simplicity: There is no need for "absolute positioning" or "flexbox" tricks if you just want a basic structure.