[css] 第14天 position:fixed;在ios下无效该怎么办？ about fe-interview

[hx891124]

容器撑满，用absolute 模拟fixed定位

[chenliwen123]

把需要用手滑动的内容用clss为.content（名字随便起）的div包起来，样式代码如下：

.content {
position: fixed;
top: 0;
left: 0;
bottom: 180px; /距离底部的距离为底部盒子的高度，自己也可以设置/
overflow-y: scroll;
width: 100%;
height: auto;
-webkit-overflow-scrolling: touch; /这句是为了滑动更顺畅/
}
-webkit-overflow-scrolling: touch; /这句是为了滑动更顺畅/
这句代码一定得写，要不上下滑动起来有些卡顿，亲自体验过的。
然后把需要固定在底部的内容用class为.footer（名字随便起）的div包起来，样式代码如下：

.footer {
position: fixed;
bottom: 0;
height: 180px;
}
这样，在真机上再次测试就没有问题了。如有更好的解决办法，希望大家互相交流。

---

作者：贵林之恋
来源：CSDN
原文：https://blog.csdn.net/zyg1515330502/article/details/79207334

[Konata9]

当采用 fixed 做吸底、吸顶布局时，如果触发键盘弹出事件则 fixed 属性会失效，布局就会被扰乱。其原因解释如下：

软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。

** 第三方库 isScroll.js 可以解决此问题。

解决的思路就是避免最外层出现滚动，即最外层使用 fixed 并且不让其可以滚动。让滚动仅在内部内容部分。

参考文章: Web 移动端 Fixed 布局的解决方案

[giggleCYT]

参考文章

[MrZ2019]

当采用 fixed 做吸底、吸顶布局时，如果触发键盘弹出事件则 fixed 属性会失效，布局就会被扰乱。其原因解释如下：

软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。

** 第三方库 isScroll.js 可以解决此问题。

[amikly]

解决方法

在内容区（main）内实现内部滚动

main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
     /*top是头部的高度*/
    top: 50px;
    /*bottom是底部的高度*/
    bottom: 34px;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}

[Iambecauseyouare]

iOS下的 Fixed + Input BUG现象：fixed 元素在软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了

提交 header, footer, main { display: block; } header { position: fixed; height: 50px; left: 0; right: 0; top: 0; } footer { position: fixed; height: 34px; left: 0; right: 0; bottom: 0; } main { margin-top: 50px; margin-bottom: 34px; height: 2000px } 使 fixed 元素的父级不出现滚动，而将原 body 滚动的区域域移到 main 内部，而 header 和 footer 的样式不变

header, footer, main {
display: block;
}

header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}

footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main绝对定位，进行内部滚动 /
position: absolute;
top: 50px;
bottom: 34px;
/ 使之可以滚动 /
overflow-y: scroll;
/ 增加该属性，可以增加弹性 */
-webkit-overflow-scrolling: touch;
}

main .content {
height: 2000px;
}
在 Android2.3+ 中，因为不支持 overflow-scrolling ，因此部分浏览器内滚动会有不流畅的卡顿。但是目前发现在 body 上的滚动还是很流畅的，因此使用第一种在 iOS 出现问题的 fixed 定位的布局就可以了。如果需要考虑 Android2.3 以下系统，因为不支持 fixed 元素，所以依然要需要考虑使用 isScroll.js 来实现内部滚动。基本思路就是： 由于 fixed 在软键盘唤起后会失效，导致在页面可以滚动时，会跟随页面一起滚动。因此如果页面无法滚动，那么 fixed 元素即使失效，也不会滚动

其他的一些细节处理

有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。
有些第三方浏览器底部的工具栏是浮在页面之上的，因此底部 fixed 定位会被工具栏遮挡。解决办法适配不同的浏览器，调整 fixed 元素距离底部的距离。
最好将 header 和 footer 元素的 touchmove 事件禁止，以防止滚动在上面触发了部分浏览器全屏模式切换，而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。

[an31742]

解决 position: fixed 在 iOS 下无效的问题：

position: fixed; 是一种用于固定元素位置的 CSS 属性。然而，iOS 在某些情况下可能不完全支持此属性。以下是一些可能的解决方法：

1. 使用 Transform: 尝试将固定元素的样式更改为使用 transform: translate3d(0, 0, 0);。这可能会触发硬件加速，从而解决位置问题。

2. 添加 Overflown 容器: 将需要固定位置的元素放置在一个具有固定高度和 overflow: auto; 样式的容器内。这可以使元素在容器内固定，并在 iOS 上正常工作。

3. 避免 Fixed 元素: 考虑在移动设备上使用其他布局方式，避免使用固定定位，以便更好地适应不同的浏览器和设备。

4. JavaScript Polyfills: 某些 JavaScript 库可以提供对 position: fixed; 的支持，即使在 iOS 下也能正常工作。您可以尝试寻找这些库，并根据需要集成到您的项目中。

请根据您的具体情况选择适当的解决方案。如果问题仍然存在，您可能需要进行更深入的调查，或考虑根据您的项目需求采取其他措施。