How to keep footer at bottom of the page with CSS





If we design a webpage that keeps its footer at the bottom of the webpage, it will be quite vague without understanding HTML and CSS.

The problem

Let's assume that we probably have done something like the photo above, which is the webpage that has white space at the bottom of footer. And I would like to say it is not wrong, unless the website is designed for static height.

In the case of html/body height value 'auto', footer is actually staying at the bottom of page even though it looks like it is not. It is happening because we have not setup height of the body(the container) so footer just follows the height of its containers.

Solution

The webpage just needs enough contents that extends the height of webpage. Therefore we just need to give enough height to the main. So it can push footer to the bottom of page.

index.html

<html>
<head>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>

style.css

html { ... }
body { ... }
header { background-color:#000; height: 300px; }
main { min-height:100vh; }
footer { background-color:#000; height: 300px; }

'min-height' setups the minimum height for the main and 100vh is 100% view port height. Setting up min-height: 100vh; to the main element above the footer will push the footer to the bottom of page.

No comments:

Post a Comment