不使用css位置将div固定到底部 [英] Fix div to bottom without using css position

问题描述

我在IOS8 Safari上遇到 position：fixed; 的问题。我已经确定它与我在页面底部定位的页脚div有关。我也试过 position：absolute; 但这也不起作用。

I am having issues with position: fixed; on IOS8 Safari. I've determined it's related to the footer div which I am positioning at the bottom of the page. I've also tried position: absolute; but that didn't work either.

有没有人知道如何在不使用CSS位置的情况下定位它？

Does anyone know of a way to position this without using CSS position?

这是我正在使用的代码：

Here is the code I'm using:

.foot-nav{
  position: fixed;
  bottom: 0;
  width: 100%;
}

推荐答案

iOS存在固定定位问题。当滑动滚动时，它将不会更新固定位置，直到释放点击/拖动。

iOS has issues with fixed positioning. When swiping to scroll, it will not update the fixed position until the tap/drag is released.

当位置：固定; 技术上有效，移动Safari不会在滚动发生时重绘固定元素，以便正确计算过度滚动动画（拖动和释放会导致页面根据滑动速度保持滚动），所以它在动画停止之前不会更新。

While position: fixed; technically works, mobile Safari does not redraw the fixed element while the scroll is happening in order to properly calculate the over-scroll animation (dragging and releasing causes the page to keep scrolling based on the speed of the swipe), so it won't update until the animation has stopped.

理论上，您可以在拖动发生时使用JavaScript手动更新元素的位置，但这会覆盖移动Safari的默认自然行为。

You could, theoretically, use JavaScript to manually update the element's position a bunch of times while dragging occurs, but that will override the default, natural behavior of mobile Safari.

如果您有兴趣，请阅读更多阅读材料和示例： http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on -ios

More reading material and examples, if you're interested: http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

这篇关于不使用css位置将div固定到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！