添加文本时元素会更改位置
[英]Element changes position when I add text
问题描述
I'm making a text browser RPG and I have the input form in the bottom of the page. 
我正在制作文本浏览器RPG，页面底部有输入表单。 When I add text to my game this form just moves down. 当我在游戏中添加文字时，该表格会向下移动。 How do I prevent that and make it fixed in a certain position so it doesn't move when I add something to the page? 如何防止这种情况，并将其固定在某个位置，以便在向页面添加内容时不会移动？
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>
3 个解决方案
解决方案1
1 2017-07-29 11:53:27
Just remove padding-top, 只需移除顶部填充，
Try with 试试看
.input:{ position:absolute; bottom:0; }
I think it will be ready. 我认为它已经准备好了。 Or just try with position:fixed. 或者只是尝试position：fixed。
解决方案2
0 2017-07-29 11:49:03
You could give it a fixed position if you are not planning to scroll at all. 如果您根本不打算滚动，则可以给它一个固定的位置。 This will keep your element located in the same spot in your viewport no matter if you scroll or not. 无论滚动与否，这都将使元素位于视口中的同一位置。
position: fixed;
You can also use position absolute in order to make your elements position not react to any other elements on your page. 您还可以使用绝对位置，以使您的元素位置不会对页面上的任何其他元素产生反应。
position: absolute;
You will then have to position your element manually using top: #px to push your element down to its desired location. 然后，您将必须使用top：#px手动定位元素，以将元素下推至所需位置。
解决方案3
0 已采纳 2017-07-29 11:56:11
You could do something like the following, which defines the height of 'messages' instead of adding a margin to the input and adds a vertical scrollbar if necessary. 您可以执行以下操作，该操作定义“消息”的高度，而不是在输入中添加边距，并在必要时添加垂直滚动条。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.