javascript - 如何防止textarea重叠列表

Question

我创建了一个可以运行的信使应用程序，但是文本框与消息重叠存在一个问题。我的 HTML：

<div>
  <ul id="messages"></ul>
  </div>
  <form onsubmit="return sendMessage();">
  <br>
  <br>
  <br>
  <div>
  <textarea id="message" placeholder="Enter message..." rows="3" cols="195"></textarea>
  <input type="submit" id="submitibtn">
  </div>
  </form>

CSS：

#message {
     resize: none;
     position: fixed;
     bottom: 0;
     height: 70px;
 }
 
 #message:hover {
     border: 2px solid black;
 }
 
 #submitibtn {
     background-color: cornflowerblue;
     width: 1580px;
     height: 30px;
     position: fixed;
     bottom: 0;
 }
 
 #submitibtn:hover {
     border: 2px solid blue;
 }

如果您想亲自查看，请访问 网站： https ://messengerwebapp.firebaseapp.com/ （以匿名身份登录并发送消息，然后查看与消息重叠的文本区域）

标签： javascripthtml

Answer 1

更改您的 CSS。这就是导致问题的原因

#message {
     resize: none;
     position: fixed;
     bottom: 0;
     height: 70px;
 }

尝试这个

#message {
     resize: none;
     height: 70px; /* THE HEIGHT SHOULD INHERIT YOUR ROWS ON THE TEXTAREA */
 }