如果元素的宽度超过设备的高度,“position:fixed”在Mobile Safari上不起作用
position: fixed
是一个古怪的小家伙,尤其是涉及到移动设备时。如果元素的宽度超过设备的高度,“position:fixed”在Mobile Safari上不起作用
当试图将固定元素与宽度大于设备高度的其他元素一起使用时,它会破坏Mobile Safari。
我想保持顶部,而内容是可滚动的。有没有解决这个问题,而不会失去经验?
在此先感谢!
例:
http://debug.studiotate.com/mobile-safari-position-fixed(这是我看到的问题 - 头消失,当你向下滚动和/或右)
预期:
http://debug.studiotate.com/mobile-safari-position-fixed/expected(这是它应该像 - 头原地踏步)
CODE:
<!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;
}
对不起 - 没有提到的DIV将有各种内容(按钮,链接等) – 2015-02-06 22:12:34
好吧,让div在你的代码,但把身体的背景颜色。 – fcastillo 2015-02-06 22:15:56
感谢您的反馈。背景颜色用于说明问题并简化代码。无论DIV是否具有背景颜色,都会出现问题。 – 2015-02-06 22:19:33
有同样的问题http://*.com/questions/41185596/position-fixed-dont - 一些手机上的工作 – evtuhovdo 2016-12-16 13:48:54