Question

我只是想知道，我们可以在我们的网站上添加像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;
}

有人可以帮我吗？

Answer 1

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

以下是该示例的粗略JSFiddle实现。如果您有任何疑问，请询问。希望这有帮助！

Answer 2

不，如果这就是你所拥有的，那就没有办法了。

您需要服务器逻辑才能完成任务。

像WhatsApp这样的评论框的粘性页脚

2 个答案: