我的 block 元素以自己的想法移动。
创建一个新的 index.html包含此内容的页面。缩小页面宽度并注意它的行为符合预期。打开移动设备“响应式”仿真，缩小宽度。为什么是<div>搬家？
#outer元素高宽100%，绝对位置
#inner元素有 bottom:0，它应该始终锚定在视口(viewport)的底部
有什么办法可以避免这种行为吗？
<!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>
最佳答案
似乎是设备模式中的错误。我报告了一个issue .
复制:
- 点击运行代码片段。
- 点击整页。
- 缩小浏览器的宽度。底部的绿色条保持相同的高度。
- 在响应模式下打开设备模式。
- 使用设备模式的句柄来减小视口(viewport)的大小。绿色条的高度发生变化。
#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>关于html - 为什么 Chrome 移动仿真在宽度缩小时移动元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42353164/