请在手机上查看以下页面:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="wide">WIDE</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
如预期的那样，固定元素位于右下角。但是，当您增加宽 div 的宽度超过设备视口(viewport)宽度(以 css 像素为单位)时，固定 div 会消失。
为什么会这样？有没有办法防止这种行为？
更多详情:
- 一个简单的测试方法是在 Chrome DevTools 中使用移动 View ，并直接在“元素”>“样式”下更改宽度。
- 接近限制宽度时，您会看到固定的 div 被水平截断。
- 没有
meta viewport也是一样，但阈值将处于默认视口(viewport)宽度 980px。 - 在
html和body上尝试了height: 100%和min-height:100%的组合没有成功。 - 在桌面浏览器中没有问题。
最佳答案
在这里回答我自己的问题。
我不确定为什么不呈现固定的 div。这在某种程度上与“宽”div 溢出 body 元素这一事实有关，导致 View 缩小并且 body 最终低于视口(viewport)高度。我仍然认为移动浏览器应该像桌面浏览器一样显示固定元素。
我的解决方法:使用 overflow-x: scroll 将宽内容包装在容器元素中。这在移动设备上运行良好，固定的 div 再次显示，宽内容可以滑动。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="ctnr">
<div id="wide">WIDE</div>
</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#ctnr {
overflow-x: scroll;
}
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
关于css - 底部固定元素在移动设备上消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41576874/