当页面上的div较大时，固定位置100％的位置不是视口宽度 [英] Position fixed 100% isn't viewport width when a bigger div is present on the page
本文介绍了当页面上的div较大时，固定位置100％的位置不是视口宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在一种情况下，我有一个固定的页面标题，该标题应为视口宽度的100％，并且有一个较大的元素，宽度约为5000px，并滚动到标题下方.
I have a scenario where I have a fixed page header, which should be 100% of the viewport width, and a bigger element that is around 5000px wide and scrolls underneath the header.
移动浏览器似乎不固定标题，而是显示较大的(计算出的比率?)标题，这在iOS上滚动速度较慢，在超过标题宽度时突然跳动(在滚动位置上)，这会出现一些问题android.
There seems to be several problems with mobile browsers not fixing the header and instead displaying a bigger (ratio calculated??) header which scrolls slower on iOS, and suddenly jumps when past the width of the header in terms of scroll position on android.
使用100vw的标头可以正常工作，但是有时标头会在某个断点处消失，而且似乎并没有真正固定好位置.
Using 100vw for the header works, but then sometimes the header disappears at a certain breakpoint, and doesn't seem to be truly fixed positioned.
从本质上讲，问题似乎是固定元素占视口的100％！= 100％，即320px，但计算出的宽度介于视口宽度和较大元素之间.
Essentially the problem seems to be that a fixed element 100% != 100% of the viewport, i.e. 320px, but a calculated width that is somewhere in between the width of the viewport and the bigger element.
任何帮助将不胜感激！
一个简化的代码示例如下...
A simplified code example is as follows...
<!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 或 0 .
The user-scalable key should have yes or no as its value, not 1 or 0.
例如
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
参考资料: Safari支持的元标记， Chrome修订版154568 ， Github上的某人
这篇关于当页面上的div较大时，固定位置100％的位置不是视口宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
