Question

我输入的位置固定在页面底部，当在移动设备上时，我选择输入屏幕高度变小，我的输入变为hiden，然后浏览器滚动页面，如何让我的输入保持可见底部？但由于某些原因，它只适用于Android浏览器（3-d pictude），对于iphone和微软设备而言，它的第二个图片。

Answer 1

如果您还没有这样做，请将此行添加到您网站的标题中：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

这可以解决您的问题。

Answer 2

如果位置固定，我不会这样做。它的工作原理类似于绝对位置。因此，您必须手动计算间隙才能正确定位元素。即使你对那些并不总是按预期工作的间隙进行硬编码，因为很多时候我看到位置固定在每个浏览器中都没有按预期工作。我建议你使用 Flexbox。

我猜您想创建一个像聊天应用程序这样的应用程序。所以解决这个问题最简单的方法是使用 Flexbox 属性。

我为您创建了一个模板，请查看下面的代码段。我给你提一些意见。使用 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>

当键盘出现时，css改变手机的身高

2 个答案: