Question

我的块元素正在以自己的想法移动。

使用此内容创建新的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>

Answer 1

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

重现：

点击运行代码段。
点击整页。
缩小浏览器的宽度。底部的绿色条保持相同的高度。
以响应模式打开设备模式。
使用设备模式的手柄来缩小视口的大小。绿色条的高度会发生变化。

＆＃13;

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

＆＃13;

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

＆＃13;

当宽度缩小时，为什么Chrome移动模拟是移动元素？

1 个答案: