position: fixed 是一个古怪的小家伙，尤其是在移动方面。
当尝试将固定元素与另一个宽度大于设备高度的元素一起使用时，它会破坏 Mobile Safari。
我想在内容可滚动时将页眉保持在顶部。有没有办法在不丢失体验的情况下解决这个问题？
提前致谢!
示例:
http://debug.studiotate.com/mobile-safari-position-fixed (这是我看到的问题 - 当您向下和/或向右滚动时标题消失)
预期:
http://debug.studiotate.com/mobile-safari-position-fixed/expected (这是它应该看起来的样子——标题保持不变)
代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
<style type="text/css">
body {
margin: 0px;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
div {
background-color: #FF0000;
height: 1500px;
width: 1000px;
}
</style>
</head>
<body>
<header>Header</header>
<div></div>
</body>
</html>
最佳答案
我认为必须删除 div 并将背景设置为正文
<body>
<header>Header</header>
</body>
和 CSS:
body {
margin: 0px;
background-color: #FF0000;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
关于html - `position: fixed` 没有 't work on Mobile Safari if an element' 的宽度超过设备的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28375278/