gpt4 book ai didi

html - 为什么 Chrome 移动仿真在宽度缩小时移动元素?

转载 作者:行者123 更新时间:2023-11-28 15:48:02 25 4
gpt4 key购买 nike

我的 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 .

复制:

  1. 点击运行代码片段
  2. 点击整页
  3. 缩小浏览器的宽度。底部的绿色条保持相同的高度。
  4. 在响应模式下打开设备模式。
  5. 使用设备模式的句柄来减小视口(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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com