我只是想知道，我们可以在我们的网站上添加像 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;
}
有人可以帮我吗？
最佳答案
是的，你当然可以做到。对于粘性页脚，技巧是将页脚绝对定位并执行 bottom:0 ，以便页脚相对于容器粘在底部。此外，您还需要编写一些 Javascript 逻辑来操作评论。
这是一个粗略的JSFiddle示例的实现。如果您有任何疑问，请询问。希望这有帮助!
关于javascript - 带有评论框的粘性页脚，如 WhatsApp，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36823017/