Question

我使用position: absolute和bottom:0

将粘滞式固定条固定在底部

当我在横向模式下在Android Chrome上加载页面并滚动到页面底部时，条形图底部是粘性的。如果我在此时尝试切换到纵向模式，则条形图会粘贴到横向模式中的相同位置，因此它最终位于屏幕中间而不是底部。

在此之后滚动到顶部时，它会回到底部。所以我发现地址栏是导致问题的地方栏，因为它隐藏在方向更改上，所以它的高度在页面底部的额外空间和额外空间上方的粘性栏结束。 / p>

我尝试滚动到页面顶部以强制显示地址栏但没有任何反应，因为实际上没有滚动条。这只是地址栏被隐藏的事实。

Answer 1

请考虑以下代码段：

＆＃13;

body {
  height: 1400px;
}

div {
  position: absolute;
  bottom: 0;
  background: red;
  width: 100%;
  height: 50px;
}

＆＃13;

<div> Footer </div>

＆＃13;

现在考虑一下这个片段：

＆＃13;

body {
  height: 1400px;
  position:relative;
}

div {
  position: absolute;
  bottom: 0;
  background: red;
  width: 100%;
  height: 50px;
}

＆＃13;

<div> Footer </div>

＆＃13;

您的代码存在可能的问题。除非您将相对位置设置为body标记，否则绝对定位不会按预期工作。您需要在页脚的父容器上设置position:relative（很可能是正文标记）

粘滞式脚踏板错误放置在设备方向更改上

1 个答案: