我的输入位置固定在页面底部，当在移动设备上我选择输入屏幕高度变小并且我的输入隐藏，然后浏览器滚动页面到它，我怎样才能让我的输入保持可见底部？但由于某种原因，它只能在 android 浏览器（3-d 图片）中正常工作，对于 iphone 和 microsoft 设备，它是 2-nd pictue。
【问题讨论】：
我不会在位置固定的情况下这样做。它的工作原理类似于绝对位置。因此，您必须手动计算间隙才能正确定位元素。即使您对并不总是按预期工作的间隙进行硬编码，因为很多时候我看到位置固定在每个浏览器中都没有按预期工作。我建议你使用 Flexbox。
我猜你想创建一个像聊天应用一样的应用。所以解决这个问题的最简单方法是使用 Flexbox 属性。
我已经为您创建了一个模板，请检查下面的 sn-p。我给你放了一些cmets。玩一下 flex 属性，看看效果如何。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Check these codes */
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
background-color: grey;
}
header,
footer {
flex: none;
background-color: DodgerBlue;
padding: 10px;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
background-color: moccasin;
}
/* These are not related to your topic it's just for styling */
.msg {
padding: 20px;
margin: 20px;
background-color: lightgreen;
}
.input-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.user-input {
width: 100%;
border-radius: 5px;
border: 1px solid grey;
height: 20px;
}
</style>
<title>Template</title>
</head>
<body>
<header>
This is header
</header>
<main>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="msg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<footer>
<div class="input-container">
<input class="user-input" type="text" name="" value="Type something here...">
</div>
</footer>
</body>
</html>【讨论】：
如果您还没有这样做，请将此行添加到您网站的标题中：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
这应该可以解决您的问题。
【讨论】：