我正在尝试编写一个非常基本的聊天网站。当聊天记录很长（页面填充或更长）时，文本超出/位于页脚下方。在这种情况下，页脚是您编写聊天消息的文本区域。
这是当前index.html
<html>
<head>
<title>Simple chat</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="main.min.js"></script>
</head>
<body>
<div id="msgs">
</div>
<div id="footer">
<footer>
<form method="post" action="/api/msg" id="form">
<textarea autofocus name="msg" id="msgfield" rows=3 cols=80></textarea>
</form>
</footer>
</div>
</body>
</html>
这是style.css：
body, html {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
/* start of snippet that doesn't do anything */
msgs {
height: 70%;
margin-bottom: 100px;
}
/* end of snippet that doesn't do anything */
textarea {
resize: none;
width: 100%;
}
footer {
position: fixed;
padding: 0px;
bottom: -17;
left: 0;
right: 0;
}
如您所见，style.css中有一个块应防止div“ msgs”到达的距离太远。但是，complete块什么都不做，就好像它不知道什么是“ msgs”一样。整个页面（包括页脚）也可以滚动。页脚应保持在可滚动区域的下方。
如何实现此行为并防止当前行为？
msgs是一个“ id”，CSS选择器将是“ #msgs”。与您的页脚相同> #footer
CSS
* { box-sizing: border-box; } // so padding and borders are included in sizes
body, html {
margin: 0;
padding: 0;
}
chat-box { // using custom tag
display: flex; // magic
flex-flow: column; // column
height: 100vh; // better than height: 100% when full window height
}
#msgs {
flex: 1; // makes this flex element grow to fill the space
overflow: auto; // adds a scrollbar if too long
padding: 1em; // for pretty
}
textarea {
resize: none;
width: 100%;
}
footer {
padding: 0.4em 0.35em 0.2em 0.35em; // for pretty
background: #ccc; // for pretty
}
form { // removing native spacing
padding: 0;
margin: 0;
}
HTML
<chat-box>
<div id="msgs"></div>
<footer>
<form method="post" action="/api/msg" id="form">
<textarea autofocus name="msg" id="msgfield" rows=3 cols=80></textarea>
</form>
</footer>
</chat-box>