页脚始终位于移动设备和桌面设备的底部CSS上

Question

I was looking around how to add a footer to the bottom of the page in both mobile and desktop, I did attempt

    .footer
{
    height: 40px; 
    width:100%; 
    background-color: #ffffff; 
    opacity: 1;
    border-top:1px solid #9a9696;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
}

However this doesn't seem to work, there seems to be a gap between the bottom of the page and the footer

Answer 1

remove relative and add fixed.

html {
  height: 100%;
  box-sizing: border-box;
}
body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
}

    .footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }

Answer 2

Try adding this code to your CSS. Should make it work normally.

CSS:

.footer {
    height: 40px;
    width: 100%;
    background-color: #ffffff;
    opacity: 1;
    border-top: 1px solid #9a9696;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

@media only screen and (max-width : 1100px){ /* You can edit the max-width value to match what you need */
  .footer {
    height: 40px;
    width: 100%;
    background-color: #ffffff;
    opacity: 1;
    border-top: 1px solid #9a9696;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top:30px; /* You can edit the value of the margin top as you need */
  }
}