当我添加文本时元素改变位置

Question

我正在制作一个文本浏览器角色扮演游戏，我在页面底部有一个输入表单。当我向我的游戏中添加文本时，此表单会向下移动。我如何防止这种情况发生并使其固定在某个位置，以便在我向页面添加内容时它不会移动？

That happens when I add text No text

html {
  border: 1px solid;
  height: 550px;
}
hr {
  display: block;
  border: 0;
  border-top: 1px solid #000;
}
.input {
  margin-top: 390px;
}

<hr>
    <body>
      <p>No text.</p>
   <div class="input"><input type="text" name="input" size="179" padding-top="333px">
   <input type="submit" value="Submit"></div>
    </body>

Answer 1

如果你根本不打算滚动，你可以给它一个固定的位置。无论是否滚动，这都会使您的元素位于视口中的同一位置。

position: fixed;

您还可以使用绝对位置，以使您的元素位置不会对页面上的任何其他元素做出反应。

position: absolute;

然后您必须使用 top: #px 手动定位您的元素，以将您的元素向下推到所需位置。

Answer 2

只需删除 padding-top，
试试
.input:{ position:absolute; bottom:0; }

我想它会准备好的。或者只是尝试 position:fixed。

Answer 3

您可以执行如下操作，它定义了 'messages' 的高度，而不是为输入添加边距，并在必要时添加垂直滚动条。

html {
  border: 1px solid;
  height: 550px;
}
hr {
  display: block;
  border: 0;
  border-top: 1px solid #000;
}
.messages {
  height: 390px;
  overflow-y: auto;
}

<hr>
    <body>
      <div class="messages"><p>No text.</p></div>
   <div class="input"><input type="text" name="input" size="179" padding-top="333px">
   <input type="submit" value="Submit"></div>
    </body>

当我添加文本时元素改变位置

Element changes position when I add text

html

javascript

css

browser

text-based