Footer is not aligning to the bottom of the page [duplicate] - html

Question

This question already has answers here:
Footer at bottom of page or content, whichever is lower
(5 answers)
Closed 11 months ago.
I have a HTML. And i want to add the Footer to it but it is not aligning to it's bottom.
#import url(https://fonts.googleapis.com/css?family=Gudea:400,700);
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght#400;700&family=Mochiy+Pop+P+One&display=swap);
:root {
--dark-one: #333;
--dark-two: #7a7a7a;
--main-color: #784cfb;
--light-one: #fff;
--light-two: #f9fafb;
--light-three: #f6f7fb;
--color_one: #ee1d52;
--color_two: #69c9d0;
--color_three: rgba(2, 0, 36, 1);
--gradient: linear-gradient(90deg, var(--color_three) 0%, var(--color_one) 35%, var(--color_three) 100%)
}
body {
perspective: 800px;
height: 100vh;
margin: 0;
overflow: hidden;
font-family: "Gudea", sans-serif;
background: #ea5c54;
background: -moz-linear-gradient(-45deg, #ea5c54 0%, #bb6dec 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ea5c54), color-stop(100%, #bb6dec));
background: -webkit-linear-gradient(-45deg, #ea5c54 0%, #bb6dec 100%);
background: -o-linear-gradient(-45deg, #ea5c54 0%, #bb6dec 100%);
background: -ms-linear-gradient(-45deg, #ea5c54 0%, #bb6dec 100%);
background: linear-gradient(135deg, #ea5c54 0%, #bb6dec 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EA5C54 ', endColorstr='#bb6dec', GradientType=1);
}
body ::-webkit-input-placeholder {
color: #4e546d
}
body .authent {
display: none;
background: #35394a;
background: -moz-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #35394a), color-stop(100%, #1f222e));
background: -webkit-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
background: -o-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
background: -ms-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
background: linear-gradient(45deg, #35394a 0%, #1f222e 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#35394a', endColorstr='#1f222e', GradientType=1);
position: absolute;
left: 0;
right: 90px;
margin: auto;
width: 100px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
padding: 20px 70px;
top: 200px;
bottom: 0;
height: 70px;
opacity: 0
}
body .authent p {
text-align: center;
color: white
}
body .success {
display: none;
color: #d5d8e2;
margin: 40px auto;
align-items: center;
text-align: center
}
body .success p {
font-size: 14px
}
body p {
color: #5b5e6f;
font-size: 10px;
text-align: left
}
body .testtwo {
left: -320px!important
}
body .test {
box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
pointer-events: none;
top: -100px!important;
transform: rotateX(70deg) scale(0.8)!important;
opacity: 0.6!important;
filter: blur(1px)
}
body .login {
opacity: 1;
z-index: -1;
top: 20px;
height: 300px;
width: 240px;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
transition-property: transform, opacity, box-shadow, top, left;
transition-duration: 0.5s;
transform-origin: 161px 100%;
transform: rotateX(0deg);
position: relative;
border-top: 2px solid #d8312a;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
padding: 100px 40px 40px 40px;
background: #35394a;
background: -moz-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #35394a), color-stop(100%, #1f222e));
background: -webkit-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
background: -o-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
background: -ms-linear-gradient(45deg, #35394a 0%, #1f222e 100%);
background: linear-gradient(45deg, #35394a 0%, #1f222e 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#35394a', endColorstr='#1f222e', GradientType=1)
}
body .login .validation {
position: absolute;
z-index: 1;
right: 10px;
top: 6px;
opacity: 0
}
body .login .disclaimer {
position: absolute;
bottom: 20px;
left: 35px;
width: 250px
}
body .login_title {
color: #afb1be;
height: 60px;
text-align: left;
font-size: 16px
}
body .login_fields {
height: 208px;
position: absolute;
left: 0
}
body .login_fields .icon {
position: absolute;
z-index: 1;
left: 36px;
top: 8px;
opacity: 0.5
}
body .login_fields input[type="password"] {
color: #dc6180!important
}
body .login_fields input[type="text"],
body .login_fields input[type="password"] {
color: #afb1be;
width: 190px;
margin-top: -2px;
background: #32364a;
left: 0;
padding: 10px 65px;
border-top: 2px solid #393d52;
border-bottom: 2px solid #393d52;
border-right: none;
border-left: none;
outline: none;
font-family: "Gudea", sans-serif;
box-shadow: none
}
body .login_fields__user,
body .login_fields__password {
position: relative
}
body .login_fields__submit {
position: relative;
top: 35px;
left: 0;
width: 80%;
right: 0;
margin: auto
}
body .login_fields__submit .forgot {
float: right;
font-size: 10px;
margin-top: 11px;
text-decoration: underline
}
body .login_fields__submit .forgot a {
color: #606479
}
body .login_fields__submit input {
border-radius: 50px;
background: transparent;
padding: 10px 50px;
border: 2px solid #dc6180;
color: #dc6180;
text-transform: uppercase;
font-size: 11px;
transition-property: background, color;
transition-duration: 0.2s
}
body .login_fields__submit input:focus {
box-shadow: none;
outline: none
}
body .login_fields__submit input:hover {
color: white;
background: #dc6180;
cursor: pointer;
transition-property: background, color;
transition-duration: 0.2s
}
.love {
position: absolute;
right: 20px;
bottom: 0px;
font-size: 11px;
font-weight: normal
}
.love p {
color: white;
font-weight: normal;
font-family: "Open Sans", sans-serif
}
.love a {
color: white;
font-weight: 700;
text-decoration: none
}
.love img {
position: relative;
top: 3px;
margin: 0px 4px;
width: 10px
}
.brand {
position: absolute;
left: 20px;
bottom: 14px
}
.brand img {
width: 30px
}
h1 {
position: relative;
text-align: center;
color: #353535;
font-size: 50px;
font-family: "Cormorant Garamond", serif
}
p {
font-family: "Lato", sans-serif;
font-weight: 300;
text-align: center;
font-size: 18px;
color: #676767
}
.frame {
width: 90%;
margin: 40px auto;
text-align: center
}
.thumb_img {
max-width: 110%;
margin-left: -14px;
margin-top: -54px
}
button {
margin: 20px
}
.custom-btn {
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: "Lato", sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
outline: none
}
.btn {
border: none;
background: rgb(251, 33, 117);
background: linear-gradient(0deg, rgba(251, 33, 117, 1) 0%, rgba(234, 76, 137, 1) 100%);
color: #fff;
overflow: hidden;
margin: auto;
margin-top: 10px
}
.btn:hover {
text-decoration: none;
color: #fff
}
.btn:before {
position: absolute;
content: "";
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shiny-btn1 3s ease-in-out infinite
}
.btn:hover {
opacity: 0.7
}
.btn:active {
box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2), inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2)
}
#-webkit-keyframes shiny-btn1 {
0% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0
}
80% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0.5
}
81% {
-webkit-transform: scale(4) rotate(45deg);
opacity: 1
}
100% {
-webkit-transform: scale(50) rotate(45deg);
opacity: 0
}
}
#context-menu {
position: absolute;
height: auto;
display: block;
top: 10%;
left: 40%;
border-radius: 5px;
width: 200px
}
ul {
list-style-type: none
}
li.menu-items {
height: 50px;
margin-top: 7px;
background-color: #fff;
box-shadow: 0 2px 20px 2px #22222225;
width: 100%;
border-radius: 4px;
font-size: 20px;
color: #444;
line-height: 50px;
vertical-align: middle;
padding-left: 15px;
cursor: pointer;
transition: all 0.1s ease-in;
transform-origin: top left;
transform: rotateY(90deg) rotateX(45deg)
}
li.menu-items:nth-child(1) {
transition: transform 0.25s 0s cubic-bezier(0, 0.36, 0.95, -0.2), background-color 0.15s ease-in
}
li.menu-items:nth-child(2) {
transition: transform 0.25s 0.15s cubic-bezier(0, 0.36, 0.95, -0.2), background-color 0.15s ease-in
}
li.menu-items:nth-child(3) {
transition: transform 0.25s 0.3s cubic-bezier(0, 0.36, 0.95, -0.2), background-color 0.15s ease-in
}
li.menu-items:nth-child(4) {
transition: transform 0.25s 0.45s cubic-bezier(0, 0.36, 0.95, -0.2), background-color 0.15s ease-in
}
li.menu-items:hover {
background-color: coral;
color: #fff;
transform: perspective(10px)
}
a img {
border: 0
}
h1 {
font: bold 32px Helvetica, Arial, Sans-Serif;
letter-spacing: -1px;
margin: 50px 0 20px 0
}
p {
margin: 0 0 20px 0
}
.close-icon:hover {
background: #efefef
}
*,
*::before,
*::after {
margin: 0;
padding: 0
}
html {
scroll-behavior: smooth
}
#header {
font-family: "Poppins", sans-serif
}
#header a {
text-decoration: none
}
#header ul {
list-style: none
}
#header img {
width: 100%
}
#header .container {
position: relative;
z-index: 5;
max-width: 92rem;
padding: 0 4rem;
margin: 0 auto
}
.stop-scrolling {
height: 150%;
overflow: hidden
}
#header .grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
justify-content: center
}
#header .text {
font-size: 1.25rem;
color: var(--dark-two);
line-height: 1.6
}
.column-1 {
margin-right: 1.5rem
}
.column-2 {
margin-left: 1.5rem
}
#header .image {
position: relative;
display: flex;
align-items: center;
justify-content: center
}
.z-index {
position: relative;
z-index: 2
}
#header .overlay {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0
}
#header .overlay .shape {
width: initial;
opacity: 0.13;
position: absolute
}
#header .overlay.overlay-lg .shape {
height: 55px
}
#header .overlay.overlay-lg .shape.wave {
height: initial;
width: 88px
}
#header .overlay.overlay-lg .shape.xshape {
height: 38px
}
#header .overlay.overlay-sm .shape {
filter: brightness(0) invert(1);
opacity: 0.15;
height: 40px
}
#header .overlay.overlay-sm .shape.wave {
height: initial;
width: 70px
}
#header .overlay.overlay-sm .shape.xshape {
height: 30px
}
#header .points {
opacity: 0.3;
position: absolute
}
#header .section {
padding: 7rem 0;
overflow: hidden
}
.section-header {
text-align: center;
margin-bottom: 1.5rem
}
#header .title {
position: relative;
display: inline-block;
padding-bottom: 1rem;
line-height: 1;
font-size: 2.8rem;
margin-bottom: 0.6rem
}
#header .title:before {
content: attr(data-title);
display: block;
margin-bottom: 0.4rem;
color: var(--main-color);
font-size: 1.15rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 3px
}
#header .title:after {
content: "";
position: absolute;
width: 90px;
height: 5px;
border-radius: 3px;
background-color: var(--main-color);
bottom: 0;
left: 50%;
transform: translateX(-50%)
}
#header .section-header .text {
max-width: 600px;
margin: 0 auto
}
#header .title-sm {
color: var(--dark-one);
font-weight: 600;
font-size: 1.6rem
}
#header .points-sq {
width: 210px
}
#header .btn {
display: inline-block;
padding: 0.85rem 2rem;
background-color: var(--main-color);
color: var(--light-one);
border-radius: 2rem;
font-size: 1.05rem;
text-transform: uppercase;
font-weight: 500;
transition: 0.3s
}
#header .btn:hover {
background-color: #6b44e0
}
#header .btn.small {
padding: 0.7rem 1.8rem;
font-size: 1rem
}
header {
width: 100%;
background-color: var(--light-three);
overflow: hidden;
position: relative
}
#header nav {
width: 100%;
position: relative;
z-index: 50
}
#header nav .container {
display: flex;
justify-content: space-between;
height: 4.5rem;
align-items: center
}
#header .logo {
width: 65px;
display: flex;
align-items: center
}
.links ul {
display: flex
}
.links a {
display: inline-block;
padding: 0.9rem 1.2rem;
color: var(--dark-one);
font-size: 1.05rem;
text-transform: uppercase;
font-weight: 500;
line-height: 1;
transition: 0.3s
}
.links a.active {
background-color: var(--main-color);
color: var(--light-one);
border-radius: 2rem;
font-size: 1rem;
padding: 0.9rem 2.1rem;
margin-left: 1rem
}
.links a:hover {
color: var(--main-color)
}
.links a.active:hover {
color: var(--light-one);
background-color: #6b44e0
}
.hamburger-menu {
width: 2.7rem;
height: 3rem;
z-index: 100;
position: relative;
display: none;
align-items: center;
justify-content: flex-end
}
.hamburger-menu .bar {
position: relative;
width: 2.1rem;
height: 3px;
border-radius: 3px;
background-color: var(--dark-one);
transition: 0.5s
}
.bar:before,
.bar:after {
content: "";
position: absolute;
width: 2.1rem;
height: 3px;
border-radius: 3px;
background-color: var(--dark-one);
transition: 0.5s
}
.bar:before {
transform: translateY(-9px)
}
.bar:after {
transform: translateY(9px)
}
nav.open .hamburger-menu .bar {
background-color: transparent;
transform: rotate(360deg)
}
nav.open .hamburger-menu .bar:before {
transform: translateY(0) rotate(45deg);
background-color: var(--light-one)
}
nav.open .hamburger-menu .bar:after {
transform: translateY(0) rotate(-45deg);
background-color: var(--light-one)
}
nav.open .links {
transform: translateX(0)
}
.header-content .container.grid-2 {
grid-template-columns: 2.5fr 3.5fr;
min-height: calc(100vh - 6rem);
padding-bottom: 2.5rem;
text-align: left
}
.header-title {
font-size: 3.8rem;
line-height: 0.8;
color: var(--dark-one)
}
.header-content .text {
margin: 2.15rem 0
}
.header-content .image .img-element {
max-width: 750px
}
header .points1 {
width: 420px;
bottom: -75px;
left: -150px
}
header .points2 {
width: 70%;
top: 65%;
left: 71%
}
header .square {
right: 68%;
top: 71%
}
header .triangle {
right: 7%;
bottom: 75%
}
header .xshape {
right: 4%;
bottom: 50%
}
header .half-circle1 {
left: 50%;
bottom: 82%
}
header .half-circle2 {
left: 5%;
top: 67%
}
header .wave1 {
bottom: 75%;
left: 20%
}
header .wave2 {
bottom: 8%;
right: 55%
}
header .circle {
left: 38%;
bottom: 63%
}
.letters {
position: absolute;
width: 13.5%;
top: -5px;
left: 15px;
opacity: 0.06
}
#media (max-width:1280px) {
.overlay.overlay-lg .shape {
height: 35px
}
.overlay.overlay-lg .shape.wave {
height: initial;
width: 63px
}
.overlay.overlay-lg .shape.xshape {
height: 24px
}
header .points1 {
width: 270px;
bottom: -50px;
left: -75px
}
header .letters {
width: 11%
}
nav .container {
height: 4.5rem
}
.logo {
width: 65px
}
.links a {
font-size: 0.8rem;
padding: 0.65rem 0.7rem
}
.links a.active {
font-size: 0.7rem;
padding: 0.7rem 1.7rem;
margin-left: 0.6rem
}
}
#media (max-width:425px) {
.connection-wrapper .toast {
width: 300px
}
}
#media (max-width:850px) {
.hamburger-menu {
display: flex;
margin-right: -2rem
}
#header img {
margin-left: -3rem
}
.links {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
right: 0;
background-color: #252525;
display: none;
align-items: center;
justify-content: center;
text-align: center;
transform: translateX(100%);
transition: 0.5s
}
.links ul {
flex-direction: column
}
.links a {
color: var(--light-one)
}
.links a.active {
margin-left: 0;
margin: 0.5rem 0
}
.letters,
header .half-circle2,
header .points1,
header .wave2 {
display: none
}
header .half-circle1 {
bottom: 55%;
left: 23%
}
header .circle {
left: 8%;
bottom: 40%
}
header .wave1 {
bottom: 87%;
left: 75%
}
header .square {
top: initial;
bottom: 5%;
left: 13%
}
header .triangle {
right: 14%;
bottom: 63%
}
header .xshape {
left: 90%;
top: 54%
}
}
#media (max-width:560px) {
.container {
padding: 0 2rem
}
.overlay.overlay-lg .shape {
height: 28px
}
.overlay.overlay-lg .shape.wave {
height: initial;
width: 52px
}
.overlay.overlay-lg .shape.xshape {
height: 22px
}
}
footer {
bottom: 0;
color: #14171a;
font-family: "Balsamiq Sans", sans-serif
}
footer a,
footer a:hover {
text-decoration: none;
color: inherit
}
.page-footer {
margin-top: 35px;
border-top: 1px solid #e6e5e6
}
.primary-footer {
padding: 36px 0!important;
background-color: #f2f3f5;
color: #666;
font-size: 14px;
line-height: 24px
}
.primary-footer ul {
margin: 0;
padding: 0;
list-style-type: none
}
.primary-footer .copyright {
margin-bottom: 0
}
.primary-footer ul li {
display: inline-block;
margin-right: 16px
}
.primary-footer a {
color: #737373;
font-weight: 600
}
.primary-footer .dislaimer {
border-top: 1px solid #e4e2e4;
margin: 23px 0 0;
padding-top: 23px;
font-weight: 300
}
.primary-footer a {
color: #737373;
font-weight: 600;
transition: color 0s ease-in-out
}
.primary-footer .dislaimer a {
font-weight: 300;
transition: all 0s ease
}
.primary-footer a:hover {
text-decoration: none;
color: var(--hover)
}
#media only screen and (max-width:767px) {
.primary-footer .copyright {
width: 100%;
text-align: center;
margin-top: 12px
}
.primary-footer ul {
text-align: center;
width: 100%
}
}
footer .flex {
display: flex
}
footer .flex-wrap {
flex-wrap: wrap
}
footer .justify-content-between {
justify-content: space-between
}
footer .align-items-center {
align-items: center
}
footer .text-center {
text-align: center
}
footer .position-relative {
position: relative
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Download Now</title>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://unicons.iconscout.com/release/v3.0.6/css/line.css" rel="stylesheet" />
</head>
<body>
<header id="header">
<nav>
<div class="container">
<div class="logo">
<img src="./favicon.ico" alt="" />
</div>
<div class="links">
<ul>
<li>
Why Us?
</li>
<li>
FAQs
</li>
<li>
Stats
</li>
<li>
Support Group
</li>
</ul>
</div>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</div>
</nav>
</header>
<form id="download_video">
<div class="login">
<div class="login_title"><span>Download Videos Online</span></div>
<input type="hidden" name="sss" value="VideoDownloader" />
<div class="login_fields">
<div class="login_fields__user">
<div class="icon"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/user_icon_copy.png" /></div>
<input type="text" id="video" name="video_url" placeholder="Video URL" />
<div class="validation"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tick.png" /></div>
</div>
<div class="login_fields__submit">
<input type="button" id="get_formats" name=jjs " value="Check Link " />
<div class="forgot ">
Supported Websites
</div>
</div>
</div>
<div class="success " id="formats ">
<img class="thumb_img " id="thumb_img " src="image/not-available.png " height="150 " align="middle " />
<br />
<br />
<label for="standard-select ">Select the preferred quality</label>
<select id="standard-select "></select>
</div>
<div class="disclaimer ">
<p>No Porn Allowed</p>
</div>
</div>
</form>
<div id="context-menu " style="display: none; ">
<ul>
<li class="menu-items ">Developer</li>
<li class="menu-items ">Support Group</li>
<li class="menu-items ">Reload</li>
<li class="menu-items ">Source Code</li>
<li class="menu-items ">Inspect</li>
</ul>
</div>
<div class="authent ">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/puff.svg " />
<p>Checking URL....</p>
</div>
<footer class="page-footer ">
<div class="primary-footer position-relative ">
<div class="container ">
<div class="flex flex-wrap justify-content-between align-items-center ">
<ul>
<li><a title="About " href="/about-us ">About</a></li>
<li><a title="Privacy Policy " href="/privacy-policy ">Privacy Policy</a></li>
<li><a title="Terms of Service " href="/terms ">Terms of Service</a></li>
<li><a title="Contact Us " href="/contact-us ">Contact Us</a></li>
</ul>
<p class="copyright ">Copyright © 2022 All rights reserved.</p>
</div>
<p class="dislaimer text-center ">
Disclaimer:- <a title="WeSing Downloader " href="/ ">DLNow.ml</a>
is Not associated with Any Supported Sites in any ways and DLNow.ml does not host any of the video or audio on our servers, and all videos or audio that you download from our tool are downloaded from their respective
CDN servers.
</p>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js "></script>
<script src="static/js/index.js "></script>
</body>
</html>
But in it my Footer is not aligning to the bottom of the page...
I have tried setting position: absolute; but it work but it is covering the main content.
I also tried setting the bottom: 0; but it was also found not to be working.
So, kindly help me to get out of it...
Original Look
Look with absolute position
https://i.stack.imgur.com/43z0u.jpg
https://i.stack.imgur.com/nNHE2.jpg

Answer 1

UPDATED
I did modify some of your CSS, you can check it out here
https://jsfiddle.net/wmLvqyj4/3/
For the mobile's screen size, it's too small for your form but tablet and desktop's are good
OLD ANSWER
I cannot run your CSS properly but can suggest you to do this way https://jsfiddle.net/479dnqy2/1/
Usually, a page footer is a static content, so we briefly know its height. You can set your page content's height with this formula your content height = full page height - footer height
.page-content {
min-height: calc(100vh - 10rem); /*10rem is the size of footer*/
}
.page-footer {
height: 10rem; /*the fixed height of the footer*/
}

Answer 2

How about this?
footer {
position: fixed;
bottom: 0;
}
or
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}