Creating a fixed footer div at the bottom of your webpage
ID: 338
Category: CSS
Added: 19th of February 2023
Views: 748
One of the issues I noticed whilst trying to create my own fixed div at the bottom of my webpage, was that the last part of the text would dissapear behind the fixed_footer div when the content was longer than the height of the content div.
This is because the content class has no reference to the fixed_footer class in the CSS code.
To resolve this issue I used calc in css.
I specified the height of the content div - the height of the fixed_footer div.
I also specified the height of the fixed_footer
The code below displays a fixed div at the bottom of the screen. It is also responsive so works across mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<style>
body,html
{
height:100%;
margin:0;
padding:0;
}
.content
{
width:100%;
height: calc(100% - 50px);
padding:10px; box-sizing:
border-box;
overflow:auto;
}
.fixed_footer
{
width:100%;
height:50px;
padding:10px;
box-sizing:border-box;
background:black;
color:white;
bottom: 0; /* set the bottom to 0*/
position: fixed;
}
</style>
<div class="content">
<script>
let i;
for (i=1; i<=100; i++)
{
document.write('<p>'+i+'</p>');
}
</script>
</div>
<div class="fixed_footer">Footer</div>
<style>
body,html
{
height:100%;
margin:0;
padding:0;
}
.content
{
width:100%;
height: calc(100% - 50px);
padding:10px; box-sizing:
border-box;
overflow:auto;
}
.fixed_footer
{
width:100%;
height:50px;
padding:10px;
box-sizing:border-box;
background:black;
color:white;
bottom: 0; /* set the bottom to 0*/
position: fixed;
}
</style>
<div class="content">
<script>
let i;
for (i=1; i<=100; i++)
{
document.write('<p>'+i+'</p>');
}
</script>
</div>
<div class="fixed_footer">Footer</div>
Click here for a live example
