在过去的几个小时里，我一直在为此挠头。我正在尝试制作一个保持在页面底部的输入字段，类似于 Omegle 聊天栏。
我已经将我的高度设置为 100%（好吧，99，因为如果它设置为 100，则页面有不必要的滚动条）并将 CSSbottom属性设置为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>
这是它的JSFiddle 。
我希望它漂浮在页面上方并与用户一起滚动，就像 Omegle 栏一样。我该怎么做？
抱歉，我知道这是一个基本问题，但我在其他任何地方都找不到答案。