當我添加文本時元素更改位置

我正在製作文本瀏覽器RPG，並且在頁面底部有輸入表單。當我將文字添加到我的遊戲中時，此表單只是向下移動。我如何防止並將其固定在某個位置，以便在向頁面添加內容時不會移動？當我添加文本時元素更改位置

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> 
 
\t <div class="input"><input type="text" name="input" size="179" padding-top="333px"> 
 
\t <input type="submit" value="Submit"></div> 
 
    </body>

來源

2017-07-29 Victor Key

刪除這個在HTML'高度：550px;' – bhv

你可以做如下的事情，它定義'消息'的高度，而不是爲輸入添加一個頁邊距，並在需要時添加一個垂直滾動條。

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> 
 
\t <div class="input"><input type="text" name="input" size="179" padding-top="333px"> 
 
\t <input type="submit" value="Submit"></div> 
 
    </body>

來源

2017-07-29 11:56:11

完美的作品！我只需要改變一些值。謝謝！ –

你可以給它一個固定的位置，如果你不打算在所有的滾動。無論您是否滾動，這將保持您的元素位於視口中的相同位置。

position: fixed;

您還可以使用絕對位置，以使您的元素位置不會對頁面上的任何其他元素做出反應。

position: absolute;

然後，您必須使用top：#px手動定位元素，以將元素向下推至其所需的位置。

來源

2017-07-29 11:49:03 DMrFrost

只是刪除填充頂，
嘗試用
.input:{ position:absolute; bottom:0; }

我認爲這將是準備好了。或者只是嘗試與位置：固定。

來源

2017-07-29 11:53:27

當我添加文本時元素更改位置

回答

相關問題