Question

我使用flexbox将表单粘贴到页面底部。提交按钮应该是页面的页脚。这适用于Chrome和Safari，但在移动版Safari中，当textarea处于焦点并且键盘弹出时，按钮下方有一个空白区域，您可以向下滚动一点。

Normal
When textarea is focused

我该怎样防止这种情况？这是我使用

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.Site {
  background-color: green;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1;
}

.text-wrapper {
  padding: 0 15px;
}

.text {
  resize: none;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 160px;
}

.footer {
  background-color: red;
  height: 60px;
  width: 100%;
  font-size: 16px;
  border-style: none;
  border-width: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="Site">
      <div class="main">

      </div>
      <div>
        <form class="footer-form" action="index.html" method="post">
          <div class="text-wrapper">
            <textarea class="text"></textarea>
          </div>
          <input class="footer" type="submit" name="" value="Submit">
        </form>
      </div>
    </div>
  </body>
</html>

＆＃13;

Flexbox粘性页脚在移动设备上的safari

0 个答案: