Html 使文本不超出页脚_Html_Css_Footer

Html 使文本不超出页脚

html css

Html 使文本不超出页脚,html,css,footer,Html,Css,Footer,我想写一个非常基本的聊天网站。当聊天日志很长（页面填充或更长）时，文本超出/低于页脚。在本例中，页脚是您编写聊天信息的文本区域这是当前的index.html <html> <head> <title>Simple chat</title> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jq

我想写一个非常基本的聊天网站。当聊天日志很长（页面填充或更长）时，文本超出/低于页脚。在本例中，页脚是您编写聊天信息的文本区域

这是当前的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中有一个块可以防止div“msgs”向下延伸太远。但是，整个块什么也不做，就好像它不知道什么是“msgs”。整个页面也可以滚动，包括页脚。页脚应位于可滚动区域下方

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

msgs是一个“id”，CSS选择器是“msgs”。

与页脚相同>#页脚

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

添加了一个overflow:auto，允许内容在过长时滚动

CSS

HTML

你能分享重新产生问题的工作代码吗？我不能。消息来自SQLite3数据库，处理程序用purescript编写。我的管辖范围仅限于html和css文件。还是我误解了“工作代码”的意思？因为这是绝对的一切，它编译。如果有更多的代码给你看，我会的。你的意思是用

#msgs{height:70%；margin bottom:100px；}

交换

#msgs{height:70%；margin bottom:100px；}

对吗？这没有任何作用。好的，那么我们需要一个更好的代码示例，看看问题出在哪里。页脚的CSS在没有#的情况下工作这是因为元素“footer”用div包装，id=footer，正如我在回复Akber Iqbal时所说的，这不是一个代码示例。这些是完整的、非缩短的.html和.css文件。你是说它应该像这样工作，而且你没有看到错误吗？在这种情况下，我们的purescript工作人员可能犯了一个错误。我已经尝试了几种方法，看看这里，这有帮助吗？是的，这确实有效。但它在最后一条消息和现在的页脚之间留下了太多的空间。仍然比写“通过页脚”要好得多。现在我只需要调整一些间距数字，但布伦特·斯蒂斯的解决方案已经对我有效了。编辑：转弯<代码>高度：70vh进入<代码>高度：90vh使它看起来很好，并做我想做的。我的原始代码中的70%只是一个通配符，看看它是否有效。效果很好！多谢各位！我知道原来的问题现在已经解决了，但是你能不能帮我把滚动条向下滚动到最大值来加载页面？JS是最好的选择。您必须找到滚动高度，然后滚动到该高度。JQuery可以很容易地设置动画，所以使用脚本拦截器的人不可能立即向下滚动？这就是我害怕的。我正在寻找纯css或html解决方案，但找不到。

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;
}

* { 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;
}

<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>