將輸入固定到頁面底部

過去幾個小時裏，我一直在爲此撓頭。我正在嘗試使輸入字段保持放在頁面的底部，類似於Omegle聊天欄。將輸入固定到頁面底部

Omegle chat bar I'm referencing

我設置我的身高爲100％（好，99，因爲如果它被設置爲100頁有不必要的滾動條）和bottom屬性設置的CSS來0，但無論怎樣我嘗試吧，酒吧停留在頁面的10％左右。

我的CSS代碼是：

html { 
height:99%; 
width:99%; 
} 

input.chatbar { 
bottom:0; 
width:90%; 
height:5%; 

outline:none; 
resize: none; 

border:none; 
border-bottom:#000 medium solid !important; 
}

和我的HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Global Chat</title> 
</head> 
<body> 
    <input class="chatbar" /> 
</body> 
</html>

和here是它的jsfiddle。

我希望它漂浮在頁面上方並與用戶一起滾動，例如Omegle欄。我將如何做到這一點？

對不起，我知道這是一個基本問題，但我在其他地方找不到答案。

來源

2013-02-26 Piccolo

http://jsfiddle.net/NRKpH/2/像這樣。 – Passerby 2013-02-26 04:13:14

添加position: fixed;的CSS

另外要小心百分比的高度。退房min and max height properties

來源

2013-02-26 04:12:17

非常感謝！我早些時候嘗試過，當它不起作用時，我刪除了代碼。經過一些調整，我忘了重新添加它。 – Piccolo 2013-02-26 04:13:19

將輸入固定到頁面底部

回答

相關問題