我正在尝试编写一个非常基本的聊天网站。 当聊天记录很长(页面填充或更长)时，文本超出/低于页脚。在这种情况下，页脚是您编写聊天消息的文本区域。
这是当前的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 中有一个 block 可以防止 div“msgs”向下延伸太远。然而，完整的 block 什么也不做，就好像它不知道“msgs”是什么一样。 整个页面也变得可滚动，包括页脚。页脚应位于可滚动区域下方。
如何实现此行为并防止当前行为？
最佳答案
使用“fixed”从流中移除元素。这可以工作，但您必须调整 msgs 元素的大小以确保它不会落后于它。我在下面使用的方法使两个元素在空间上直接相关。 flex 的父显示让两个子创建一个列。一些规则在这里和那里，如下所示，指导他们如何占用空间。
添加了一个 overflow: auto 允许内容在太长时滚动。
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>
关于html - 使文本不超出页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59187005/