我想知道是否有针对此问题的CSS解决方案。
这个想法是要有一个页脚，它是：
1.停留在窗口的底部，而不是页面的底部（即，如果内容大于窗口-无论窗口的大小如何-页脚始终可见并固定在底部）的浏览器窗口，而不是隐藏在所有看不见的内容之下）
但最重要的ALSO
聊天应用程序就是一个很好的例子，您可以在其中输入消息的底部，并希望消息直接显示在该消息输入框的上方。这是一个小提琴：http : //jsfiddle.net/8d08200q/（下面的代码，因为stackoverflow强制执行了它）。
目前，jsfiddle解决了第一个问题，但没有解决第二个问题（内容位于消息输入框的后面）。
标准粘性页脚可解决第二个问题，但是如果内容大于窗口，则消息输入框将消失。
关于与IE9 +兼容的纯CSS解决方案的任何想法（不涉及将JavaScript限制在浏览器窗口大小内的JavaScript）？
最相关的CSS是：
body {
font: 1.5em Helvetica, Arial;
height: 100%;
padding-bottom: 2.5em;}
form {
background: #2c3e50;
padding: 3px;
position: fixed;
bottom: 0;
width: 100%;
height: 2.5em; }
谢谢！
这取决于您想要的内容比窗口高时的滚动行为。我想到三个：
出现一个滚动条，仅滚动内容（页脚始终位于内容下方）。添加新内容时，它会在末尾添加，但是您必须手动向下滚动才能看到它。
您始终希望看到内容的底部。添加新内容后，您希望它“弹出”先前的内容。这样，新内容将始终位于页脚上方。但是，在这种情况下，您没有滚动条来查看窗口上推的所有内容。
与数字2相同，但是在这种情况下，您希望滚动条能够看到所有先前的内容。
我将数字2和3放进去的原因是，您只能在CSS上使用数字2来做数字2，而对于数字3则需要JavaScript。
首先，数字1：
如果您的内容是element，.main-content而页脚是element .footer，则解决方案主要是围绕以下CSS进行的：
.main-content {
height: 85vh;
overflow: auto;
}
.footer {
position: absolute;
height: 15vh;
bottom: 0;
}
在此处查看更完整的示例：http : //codepen.io/anon/pen/zGLLXz
2号：
您将主要将CSS更改为.main-content：
.main-content {
position: absolute;
bottom: 15vh;
}
此处的完整示例：http : //codepen.io/anon/pen/JdBBVM
3号
CSS与数字1相同，但是您将添加一个JavaScript函数，该函数将在.main-content每次添加新内容时向下滚动到底部。
参见以下示例：http : //codepen.io/anon/pen/LVBBvd
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句