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

Question

我正在寻找如何在移动设备和桌面设备的页面底部添加页脚，我确实尝试过

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

然而这似乎不起作用，页面底部和页脚之间似乎有空隙

Answer 1

删除相对并添加固定。

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;
    }