Question

过去几个小时我一直在摸不着头脑。我正在尝试将输入字段保留在页面底部，类似于聊天栏。

Omegle chat bar I'm referencing

我已将高度设置为100％（好吧，99，因为如果它设置为100页面有不必要的滚动条）并将CSS bottom属性设置为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。

我希望它漂浮在页面上方并与用户一起滚动，就像在聊天栏中一样。我该怎么做？

抱歉，我知道这是一个基本问题，但我无法在其他任何地方找到答案。

Answer 1

将position: fixed;添加到css

还要注意百分比的高度。查看min and max height properties

将输入固定到页面底部

1 个答案: