Question

好的，所以我在这个网站上查看了一些关于粘性页脚的其他问题，并尝试了大量的问题，让他们在移动设备上工作，但无济于事（台式机很好）。我正在我的网站上运行buddypress所以html是通过它生成的，这就是它目前的样子。我添加了一个绿色背景，使其更清晰。

Mobile Image

这是我的css for buddypress容器和页脚。容器和页脚有绝对定位，而内部的div（标题，导航和正文）都是相对的。

#buddypress{
  width:100%; /* Add this */
  height:100%;
  max-width: 480px;
  top:0;
  left:0;
  position: absolute;
  margin-bottom: 100px;
  background:black;
  color:white;
}
.x-colophon.bottom {
  height: 100px;
  background: green;
  bottom: 0;
  position: absolute;
}

#buddypress #item-header{
background-color: rgba(49,175,145,1);
border: none;
width: 100%;
left: 0;
right: 0;
position: relative;

}

#item-nav {
background-color: white;
font-size: 16px;
width: 100%;
position: relative;
}

#item-body {
background-color: white;
color: black;
width: 100%;
position: relative;
}

Answer 1

在页脚上试试这个 -

.footer {
        position: relative;
        bottom:  -500px; // you can adjust the negative value
    }

绝对页脚不会粘在页面底部，移动

1 个答案: