如果元素的宽度超过设备的高度，“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>

来源

2015-02-06 Chris Tate

有同样的问题http://stackoverflow.com/questions/41185596/position-fixed-dont - 一些手机上的工作 – evtuhovdo 2016-12-16 13:48:54

我认为DIV必须被删除，并设置背景身体

<body> 
    <header>Header</header> 
</body>

和CSS：

body { 
    margin: 0px; 
    background-color: #FF0000; 
} 

header { 
    background-color: #00FF00; 
    left: 0px; 
    position: fixed; 
    top: 0px; 
}

来源

2015-02-06 22:04:41 fcastillo

对不起 - 没有提到的DIV将有各种内容（按钮，链接等） – 2015-02-06 22:12:34

好吧，让div在你的代码，但把身体的背景颜色。 – fcastillo 2015-02-06 22:15:56

感谢您的反馈。背景颜色用于说明问题并简化代码。无论DIV是否具有背景颜色，都会出现问题。 – 2015-02-06 22:19:33

如果元素的宽度超过设备的高度，“position：fixed”在Mobile Safari上不起作用

回答

相关问题