当页面上存在较大的 div 时，位置固定 100% 不是视口宽度
Posted
技术标签:
【中文标题】当页面上存在较大的 div 时，位置固定 100% 不是视口宽度【英文标题】：Position fixed 100% isn't viewport width when a bigger div is present on the page 【发布时间】：2015-04-08 16:30:59 【问题描述】：我有一个场景，我有一个固定的页眉，它应该是视口宽度的 100%，以及一个大约 5000 像素宽并在页眉下方滚动的更大元素。
似乎有几个问题，移动浏览器没有修复标题，而是显示更大（比率计算？？）标题，在 ios 上滚动速度较慢，并且在滚动位置超过标题宽度时突然跳转安卓。
对标头使用 100vw 有效，但有时标头会在某个断点处消失，并且似乎不是真正固定的位置。
基本上问题似乎是一个固定元素 100% ！= 100% 的视口，即 320 像素，但计算出的宽度介于视口的宽度和更大的元素之间。
任何帮助将不胜感激！
一个简化的代码示例如下...
<!html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<style>
*
margin: 0;
padding: 0;
.a-div
position: fixed;
width: 100%;
height: 100px;
z-index: 1;
background: dimgray;
border-left: 1px solid red;
border-right: 1px solid pink;
.parent
width: 5000px;
overflow: hidden;
.another-div
position: relative;
width: 1%;
height: 100vh;
float: left;
background: #5f9ea0;
.another-div:nth-child(even)
background: #add8e6;
</style>
</head>
<body>
<div class="a-div"></div>
<div class="parent">
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
<div class="another-div"></div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：user-scalable 键的值应为 yes 或 no，而不是 1 或 >0.
例如
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
参考：Safari Supported Meta Tags, Chrome Revision 154568, Some guy on Github
【讨论】：
以上是关于当页面上存在较大的 div 时，位置固定 100% 不是视口宽度的主要内容，如果未能解决你的问题，请参考以下文章
除非另一个 div 存在，否则让 div 占据页面的 100%
设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div,小于30