我的联系表在手机上显示时出现溢出问题答案

【问题标题】：I'm having an issue with my Contact Form overflowing when displayed on a mobile我的联系表在手机上显示时出现溢出问题
【发布时间】：2016-10-27 02:10:26
【问题描述】：

问题基本上是，每当我在手机上显示此表单时，当我在表单中输入文本时，文本区域扩展太多并越过提交按钮和页脚。当我在 textarea 之外单击时，它保持展开状态，但提交按钮和页脚返回到 textarea 下方的位置。我究竟做错了什么？我在这里提供了 html 和 css。是什么导致了这样的事情发生，我该如何解决？

我想要它做的就是保持合理的尺寸。在桌面上加载时似乎没有任何问题。它似乎只发生在手机上。

这是 HTML

<!DOCTYPE html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head>

<body>
  <form action="success.php" method="POST" onSubmit="return     validateTextbox();" enctype="multipart/form-data">
    <input type="hidden" name="action" value="submit"> Full Name:
    <input id="fullname" name="name" type="text" value="" size="40" placeholder="First and Last Name" />
    <br>
    <br> Your Email:
    <input id="youremail" name="email" type="email" value="" size="40" placeholder="Enter your Email" />
    <br>
    <br>
    <!--How do you want your transcript?<br><br>
<input type="radio" name="transcript_type" value="verbatim"/>Verbatim
<input type="radio" name="transcript_type" value="non_verbatim"/>Non-  Verbatim
<input type="radio" name="transcript_type" value="unknown"/>Don't Know  Yet<br><br>-->Your Message:
    <br>
    <br>
    <textarea id="messageArea" name="message" rows="40" cols="80" placeholder="Enter your message here (10 character minimum.)"></textarea>
    <br>
    <input type="submit" value="Submit" onclick="return val();" /> </form>
</body>

</html>

这是 CSS

body {
    background-color: black;
}
form {
    /*border-style: solid;
border-right-style: none;
border-left-style: none;*/

    padding-top: 100px;
    text-align: center;
    width: 100%;
    background-size: cover;
    background-image: url(images/starbright_avw.png);
    margin-top: 20px;
    color: white;
}
label {
    font-family: impact;
}
/* 
text-align: center;
    margin-top: 40px;*/

input[type="submit"] {
    height: 50px;
    border-radius: 5px;
    border-style: solid;
    border-color: black;
    color: black;
    margin-bottom: 50px;
    margin-top: 10px;
}
.row {
    margin-top: 20px;
}
p.message {} p.yourMessage {
    font-family: impact;
    color: blue;
}

【问题讨论】：

能否提供截图？
如果你给它一个像height: 686px这样的固定高度，它似乎不会被消耗。我还在研究它。
感谢 alooot.... 给它一个固定的高度工作。但我几乎发誓我之前尝试过它并没有奏效。奇怪的。不过谢谢...

标签： html css forms footer contact

【解决方案1】：

我认为这可能是由于移动网站视口缩放造成的。一旦你在 textarea 中键入任何字符，移动视口缩放会将 line-height 放大 10px，这会将 textarea 的高度增加 cols * 10px。在您的代码中，它又增长了 400 像素。我有两个解决方案。

为文本区域设置固定高度。至于你的情况，你可以将textarea的高度设置为cols * line-height。假设你的文字行高是18px，cols="40"，你可以设置height:18*40=720px;。
您可以添加：

<head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /></head>

并将文本区域的宽度设置为 100%。

【讨论】：