在移动设备上打开键盘时，如何强制我的内容缩小以适应可用空间而不是向上移动？

Question

考虑下面的代码片段，我在其中创建了一个基本的聊天窗口。

问题： 当您将输入集中在移动设备上时，整个页面会向上移动，将标题和消息推到视图之外。

目标：当您将输入聚焦在移动设备上时，

#messages

部分会缩小以容纳键盘（类似于减小窗口高度时页面在桌面上的行为方式）。

（下面包含图片）

我尝试解决它：我尝试使用

height: 100%

而不是

100dvh

，我尝试将高度声明移动到

<body>

而不是

<html>

。

html,
body {
  padding: 0;
  margin: 0;
}

html {
  height: 100dvh;
  width: 100dvw;
}

body {
  height: 100%;
  width: 100%;
  background-color: white;
}

#content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#header {
  padding: 20px;
  background-color: #ccc;
}

#messages {
  margin: -10px 0;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
}

.message {
  padding: 20px;
}

#footer {
  display: block;
  background-color: #aaa;
  padding: 20px;
}

input {
  padding: 5px;
  width: 100%;
  display: block;
}

button {
  border: 0;
  margin: 4px 0;
  padding: 4px;
  background-color: orange;
  font-weight: bold;
}

<div id="content">
  <div id="header">Header</div>
  <div id="messages">
    <div class="message"><b>John:</b> Lorem ipsum dolor sit amet.</div>
  </div>
  <form id="footer">
    <input>
    <button type="button">Send Message</button>
  </form>
</div>

这是当前的行为。 标题和消息已被推到视图之外。

这是所需的行为。 标头保持在原位，并且

messages

div 缩小以适应键盘。

Answer 1

我认为媒体查询会对此有所帮助：

    @media (max-width: 600px) { /* Adjust the max-width based on your requirements */
  #messages {
    max-height: 50vh; /* Example value, adjust as needed */
    overflow: auto;
  }
}

在移动设备上打开键盘时，如何强制我的内容缩小以适应可用空间而不是向上移动？

问题描述投票：0回答：1

1个回答

最新问题

在移动设备上打开键盘时，如何强制我的内容缩小以适应可用空间而不是向上移动？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1