为什么进行transform：translateX影响移动设备上固定元素的高度？
[英]Why does transform: translateX affect a fixed element's height on mobile?
问题描述
Just now I ran into a weird probelm, I have a fixed element with height:100% . 
刚才我遇到了一个奇怪的问题，我有一个height:100%的固定元素。 Everything works well until I open Chrome Dev Tool and enter the mobile debug mode .I found in mobile debug mode the fixed element's height will not 100% but a little overflows. 一切正常，直到我打开Chrome Dev Tool并进入移动调试模式 。在移动调试模式 下，我发现固定元素的高度不会100%而是有点溢出。 After my repeated debugging, I found the sibling's translateX property affects the fixed element's height. 经过反复调试后，我发现同级元素的translateX属性会影响固定元素的高度。 And when I tweak the value of translateX property, the height of the fixed element changes too. 当我调整translateX属性的值时，固定元素的高度也会改变。 I simplified it into the following code: 我将其简化为以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fixed Element Height Not 100%</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
.a {
transform: translateX(100px);
width: 100%;
height: 200px;
}
.b {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
Could someone tell me that whether this is expected or not ? 有人可以告诉我这是否可以预期吗？ If this is expected and what causes this ? 如果这是预期的，并且是什么原因造成的？
2 个解决方案
解决方案1
2 2019-08-28 07:44:05
Remove 2nd body tag CSS, which is overflow:hidden and add that property to first body tag CSS, following code will help you. 删除第2个body标签CSS，该CSS已溢出：隐藏并将该属性添加到第一个body标签CSS，以下代码将为您提供帮助。
body {
height: 100%;
width: 100%;
overflow: hidden;
}
解决方案2
1 2019-08-28 07:44:36
not sure but try to use vh instead of % 不确定，但尝试使用vh而不是%
thinks this article would be very interesting aswell for this matter: 认为本文对此也将非常有趣：
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.