带有评论框的粘页脚，如 WhatsApp答案

【问题标题】：Sticky footer with comment box like WhatsApp带有评论框的粘页脚，如 WhatsApp
【发布时间】：2016-08-17 19:23:15
【问题描述】：

我只是想知道，我们能否在我们的网站上添加一个带有评论框（如 WhatsApp）的粘性页脚。并在同一页面上显示评论。有办法吗？

这是我的 HTML 代码

<!DOCTYPE html> <html lang="en-US">

 <head>     <link rel="stylesheet" href="main.css" type="text/css" />
    <title>ChatRoom</title>      </head>

 <body>     <div id="navigation">       <a href="#">test</a>    </div>


    </body>
</html>

这是我网站的 CSS

    body {
    padding: 0;
    margin: 0;  
    font-family: Lucida Grande, Helvetica, Arial, sans-serif;
    font-size: 12px;
}

#navigation {
  position: fixed;
  top: 0;
  width: 100%;
  color: #ffffff;
  height: 10%;
  text-align: center;
  padding-top: 15px;
  /* Adds shadow to the bottom of the bar */
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  box-shadow: 0px 0px 8px 0px #000000;
  /* Adds the transparent background */
  background-color: rgba(60, 179, 113, 1.0);
  color: rgba(60, 179, 113, 1.0);
}

#navigation a {
    font-size: 40px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    text-decoration: none;
}

#content {
    width: 600px;
    padding-top: 70px;
    padding-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

#content img {
    padding-top: 20px;
    padding-bottom: 30px;
}

谁能帮帮我？

【问题讨论】：

标签： javascript html comments whatsapp sticky-footer

【解决方案1】：

是的，你肯定能做到。对于粘性页脚，诀窍是定位页脚absolute 并执行bottom:0 以便页脚相对于容器粘在底部。此外，您还需要编写一些 Javascript 逻辑来操作 cmets。

这里是一个粗略的JSFiddle 实现示例。如果您有任何问题，请提出。希望这会有所帮助！

【讨论】：

【解决方案2】：

不，如果你只有这些，那就没有办法了。

您需要服务器逻辑来完成您的任务。

【讨论】：