页脚未与页面底部对齐

Question

我有一个HTML。我想给它添加页脚，但它没有与底部对齐。

@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>
              <a href="/why-us">Why Us?</a>
            </li>
            <li>
              <a href="/faq">FAQs</a>
            </li>
            <li>
              <a href="/stats">Stats</a>
            </li>
            <li>
              <a href="/" class="active">Support Group</a>
            </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 ">
                            <a href="/supported-sites ">Supported Websites</a>
                        </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>

但是我的页脚没有与页面底部对齐...

我试过设置 position: absolute; 但它有效，但它涵盖了主要内容。

我也试过设置 bottom: 0; 但也发现它不起作用。所以，请帮助我摆脱它...

Original Look	Look with absolute position
https://i.stack.imgur.com/43z0u.jpg	https://i.stack.imgur.com/nNHE2.jpg

Answer 1

这个怎么样？

footer {
  position: fixed;
  bottom: 0;
}

或

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Answer 2

已更新

我确实修改了你的一些CSS，你可以在这里查看

https://jsfiddle.net/wmLvqyj4/3/

对于手机的屏幕尺寸，它对于您的表格来说太小了，但平板电脑和台式机的屏幕尺寸都不错

旧答案

我不能运行你的 CSS 但可以建议你这样做 https://jsfiddle.net/479dnqy2/1/

通常页脚是静态内容，所以我们简单的知道它的高度。您可以使用此公式 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*/
}

页脚未与页面底部对齐

Footer is not aligning to the bottom of the page

html

css

footer

sticky-footer