One of the most common problems on web development is the footer placed at the center of the page when there is no content / less content to occupy the full height of the viewport. Similar to the example below
PROBLEM:
The problem is footer is relatively positioned so its starting position is the last point of its previous div. So, in case the previous div doesn’t have enough content it doesn’t occupy the full height and naturally, the footer will be placed just after that. This confirms that having footer relatively positioned won’t work for us. So what do we need to do is place footer absolutely positioned to end of the page. We can do it in two ways:
SOLUTION 1:
Let’s consider our website has a structure like this:
<html>
<body>
<div id="app">
<div id="content">
Content
</div>
<div id="footer">
Footer Section
</div>
</div>
</body>
</html>The app div can be optional and the body can be used instead of it. The idea is app takes the entire height of the page so that the footer can be absolutely placed at bottom of the page. So we can set min-height of app to be 100vh and relatively positioned.
#app {
min-height: 100vh;
position: relative;
}
#content {
padding-bottom: 25px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
background: orange;
}Since the footer is absolutely placed and content can go behind footer, we need to add a padding-bottom equal/more than the height of the footer. In this case, the height of the footer is 18px I am adding an extra 7px to have a space between content and footer. It now works as expected the footer is placed at bottom of the page no matter the size of content. But there is a problem most people don’t notice. On mobile and tablet devices, viewport height is the height of the entire screen excluding the notification bar. But the webpage starts after the browser bar/URL bar which results in height of the page being larger than it’s displayed.
Example: Let’s consider the size of a mobile screen is 500px which means 100vh = 500px for that particular device. The browser bar is usually 50-80px. So, if the app min-height is set to 100vh. it’s going to occupy 500px after browser bar. So, the order of displaying will be Browser Bar (80px) + Webpage (500px) = 580px which is 80px more than the screen size. So, the footer gets pushed to the bottom and is not visible on screen. If you don’t care that much about this issue this is by far the easiest solution to implement. If you want to fix this too try solution 2
SOLUTION 2:
Since setting min-height 100vh doesn’t work well on mobile. We need to use something which is not dependent on screen size and actually considers the available space. This solution is similar to solution 1 but instead of using viewport height we are going to use percentage.
html,body {
margin: 0;
height: 100%;
}
#app {
position: relative;
min-height: 100%;
}
#content {
padding-bottom: 25px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
background: orange;
}The idea is to set the height of the app to 100% of available space. But for it know there’s a space available, we have to set height for its parents till we reach html. Here I set 100% height for html and body so that it takes the full height available and when we set min-height to 100% on app it will use the parent’s height to take entire space possible. This works perfectly on all kind of devices. The only con on this approach is if you have layers of div before you add the footer. You need to provide 100% height to each parent.
We stumbled over here by a different web page and thought I might as well check things out. I like what I see so now i’m following you. Look forward to looking at your web page repeatedly.