使文本不超出页脚

Question

我正在尝试编写一个非常基本的聊天网站。当聊天记录很长（页面填充或更长）时，文本将成为 beyond/under 页脚。在这种情况下，页脚是您编写聊天消息的文本区域。

这是当前的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" 向下移动太远。然而，完整的块什么也不做，就好像它不知道 "msgs" 是什么一样。整个页面也变得可滚动，包括页脚。页脚应位于可滚动区域下方。

如何实现此行为并阻止当前行为？

Answer 1

msgs 是一个 "id"，CSS 选择器，它是“#msgs”。您的页脚也一样 > #footer

Answer 2

使用 'fixed' 从流中删除元素。这可以工作，但您必须调整 msgs 元素的大小以确保它不会落后于它。我在下面使用的方法使两个元素在空间上直接相关。 flex 的父显示让两个子创建一个列。下面显示的一些规则指示他们如何占用 space.

添加了 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>

使文本不超出页脚

Make text not go beyond footer

html

css

footer