Hey there, I'm facing an issue on my website. When the footer is set to position absolute and the content is smaller, it doesn't push the footer to the end as expected. I've implemented some techniques to address this, but I'm not sure if they're ideal.
You can view the site here
The problem only occurs in the mobile version of Chrome when pinch zooming on the footer object. You can see the issue in this video.
Here is the code snippet:
It's built using HTML5 & CSS3 with Bootstrap 4.2.1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<style>
body {
background-color: dimgray;
}
img[alt="www.000webhost.com"] {
display:none;
div.row [class*="col-12"] {
margin-bottom: 1rem;
}
div.nomarginbottom {
margin-bottom: 0 !important;
}
.display-5 {
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
/*footer on the bottom */
html {
height:100%;
}
body {
min-height:100%;
position:relative;
}
body::after {
content:'';
display:block;
height:100px;
}
.footer-bottom {
position:absolute;
bottom:0;
width:100%;
}
/* smaller letters on smaller screen - footer */
@media (max-width: 741px) {
.footer {
font-size: 100%;
}
}
@media (max-width: 600px) {
.footer {
font-size: 80%;
}
}
</style>
</head>
<body>
<div class="pt-0 box jumbotron jumbotron-fluid text-center">
<h1 class="display-3">Test</h1>
</div>
<div class="container-fluid text-center text-white">
<div class="row text-center mb-4 d-none d-lg-block">
<div class="col-12">
<h1>Web developer in 2019 <b>like</b>...</h1>
</div>
</div>
<div class="row text-center mb-5">
<div class="col-12">
<h2>Happy New CODE!</h2>
</div>
</div>
<div class="row footer-bottom mt-5">
<div class="col-12 footer bg-dark p-3 lead mb-0">The site was created by Jan Kustra, the executive of: XeDA+ Department of Websites.</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>