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

Answer 2

尝试将此代码添加到CSS中。应该让它正常工作。

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 */
  }
}

页脚总是在移动和桌面上的底部CSS

2 个答案: