I'm facing an issue on a website where the footer is not sticking to the bottom of the document body in HTML. The problem arises when I try to place the footer at the end of the content, leading to white space after it. If I use fixed positioning for the footer in CSS, it sticks to the bottom of the user's view rather than the document. Here's an illustration of the problem: https://i.sstatic.net/1ap3E.png. When using fixed positioning, the result looks like this: https://i.sstatic.net/fey2I.png. To provide more context, here's another image showing the footer attached to the bottom of the user's view: https://i.sstatic.net/oNpUB.png. My goal is to attach the footer to the end of the document after all contents without relying on the body or user view.
/*End FontFamily*/
/*===========================================================================*/
/*General style*/
body{
font-family: Vazirmatn;
}
.shadow{
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.cardbox{
background-color: white;
margin-bottom: 16px;
}
hr{
color: lightgray;
}
a{
text-decoration: none;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.green{
color: green;
}
red{
color: red;
}
.gray{
color: darkgray;
}
.darkgreen{
color: darkgreen;
}
... (CSS styling continues)
<!DOCTYPE html>
<html dir="rtl">
<head>
<!-- Head section content here -->
</head>
<body style="background-color: aliceblue">
<!-- Main body content starts here -->
<!-- Place your HTML content and structure here -->
<!-- Footer section begins -->
<footer>
<div class="footer cardbox shadow">
Your custom footer content goes here.
</div>
</footer>
</body>
</html>