如何使 div 始终定位在屏幕上的单个位置？

Question

我有一个带有文本区域和提交按钮的 div，但我希望无论发生什么情况，这个 div 都位于屏幕上的单个位置。

如您所见，文本区域位于单个屏幕位置，但每次我发送消息时它都会关闭，就像这里一样

我希望我的这个文本区域位于屏幕的末尾，而不是因为消息而下降或上升

HTML

  <div className='messageText'>
    <textarea  
      name="" 
      id="" 
      cols="30" 
      rows="10"  
      placeholder='Digite sua mensagem...'
      value={message}
      onChange={(e) => setMessage(e.target.value)}
     ></textarea>
    <button onClick={handleSendMessage}>Enviar</button>
  </div>

CSS

.messageText {
  align-items: center;
  text-align: center;
  justify-content: center;
  display: flex;
  margin-top: 4vh;
}

.messageText textarea {
 border-radius: 6px;
 border: none;
 outline: none;
 width: 50%;
 height: 10vh;
 background-color: #3d3939;
 color: #fff; 
}

.messageText button {
  height: 10vh;
  width: 10vh;
  background-color: #ff914d;
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.1rem;
}

Answer 1

@Bernard Borg 已经回答了我之前的问题。 我仍然会提交答案只是为了另一个例子。

正如他提到的那样，使用position: fixed; 那么你就可以轻松实现它。

忽略用于滚动 div 的演示文本。

 .TextAreaDiv{ position: fixed; bottom: 0; }.MessageArea{ overflow: scroll; height: 150px; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="MessageArea"> <h3>quotes</h3> <blockquote> This a long quotations For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. <br> <q>can nested some short quote</q> </blockquote> <q>This is a short quotations</q> <hr> <h3>preformatted</h3> <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre> <hr> <h3>abbreviations</h3> <p> The HTML &lt;abbr&gt; element represents an abbreviation and optionally provides a full description for it. <br> Demo below <br> The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. </p> <hr> <h3>address</h3> <p>Demo using &lt;address&gt; tag to display address <address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> <hr> <h3>citation</h3> <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p> <hr> </div> <div class="TextAreaDiv"> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Send message" aria-label="Send message" aria-describedby="button-send"> <div class="input-group-append"> <button class="btn btn-primary" type="button" id="button-send">Send</button> </div> </div> </div> </div>

Answer 2

使用 position：固定你可以实现你想要的

 footer { display: flex; justify-content: center; align-items: center; position: fixed; width: 100%; bottom: 0; left: 0; height: 100px; }.messageText { align-items: center; text-align: center; justify-content: center; display: flex; }.messageText textarea { border-radius: 6px; border: none; outline: none; height: 10vh; background-color: #3d3939; color: #fff; }.messageText button { height: 10vh; width: 10vh; background-color: #ff914d; color: #fff; outline: none; border: none; cursor: pointer; letter-spacing: 0.1rem; }

 <footer> <div class="messageText"> <textarea name="" id="" cols="30" rows="10" placeholder="Digite sua mensagem..."></textarea> <button>Enviar</button> </div> </footer>