为什么 Chrome 移动仿真在宽度缩小时移动元素？答案

【问题标题】：Why Chrome mobile emulation is moving element when width shrinks?为什么 Chrome 移动仿真在宽度缩小时移动元素？
【发布时间】：2017-07-10 05:45:44
【问题描述】：

我的块元素是按照自己的想法移动的。

使用此内容创建一个新的index.html 页面。缩小页面宽度并注意它的行为符合预期。打开移动设备“响应式”仿真，并缩小宽度。为什么<div> 在移动？

#outer 元素是高度和宽度 100%，绝对位置

#inner 元素的底部：0，它应该始终锚定到视口的底部

有什么办法可以避免这种行为？

<!DOCTYPE html>
<html>
<head>

<style>

#outer {
  height: 100%;
  width: 100%;
  position: absolute;
}

#inner {
  height: 200px;
  width: 100%;
  background: green;
  position: absolute;
  bottom: 0;
}

</style>
</head>
<body>
  <div id='outer'>
    <div id='inner'></div>
  </div>
</body>
</html>

【问题讨论】：

标签： html css google-chrome google-chrome-devtools

【解决方案1】：

似乎是设备模式中的错误。我举报了issue。

转载：

点击运行代码sn-p。
点击整页。
减小浏览器的宽度。底部的绿色条保持相同的高度。
在响应模式下打开设备模式。
使用设备模式的句柄来减小视口的大小。绿色条的高度发生变化。

#outer {
  height: 100%;
  width: 100%;
  position: absolute;
}

#inner {
  height: 200px;
  width: 100%;
  background: green;
  position: absolute;
  bottom: 0;
}

<div id='outer'>
  <div id='inner'></div>
</div>

【讨论】：

谢谢，是的，这似乎是一个错误
由于缺少视口元数据，他们回答为 wontfix。即使视口设置为device-width，我仍然会遇到此问题。当我将宽度减小到 240 像素以下时会发生奇怪的事情（如果没有视口元数据，它会很快低于屏幕，如果视口设置为向上移动）。 Firefox 开发人员中没有任何问题。工具.