Ever had a page that did not have enough content on it so when you viewed it, the footer was not at the foot of your page but rather in the middle of the page?
Let’s go through the process step-by-step of how we want our webpage to have a full height of our screen.
- We want to use the property min-height because we only want to forcibly show our height value when absolutely necessary.
- We want to have a first value 100vh because we want 100% viewport height (viewport being the user’s screen size).
- We want to have a second value where we have the total number of pixels that is above and below the main area of the page (e.g. header, footer, title bar).
- We want to use the calc() as a value where inside the paratheses, we will use the first value (100vh) and subtract it from the second value (total number of pixels).
In the end, this is the code I used for my website…
#main {
min-height: calc(100vh - 283px);
}
Screenshot without Additional CSS
Screenshot with Additional CSS
