Question

我需要在我网站的每个页面的底部显示一个固定位置的内容，就像这样。

<div class="footer-fix">
    <p>This is its contents......</p>
</div>

.footer-fix {
    background:#fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
}

我的问题是我网站上有很多网页。那么我是否需要在几乎每个网页中添加此代码，或者在没有在每个页面中添加此代码的情况下还有其他方法吗？

希望有人可以帮助我。

谢谢。

Answer 1

演示：http://jsfiddle.net/qz94zkmm/

首先，是的，你可以在jQuery中做到这一点。但不推荐！

这是一个可以动态插入html＆amp; amp;将样式转换为元素：

function appendHtmlTo(where, htmlText, cssText) {
  $(where).append(htmlText).append('<style text="text/css">'+cssText+'</style>');
}

并调用此函数：

appendHtmlTo('body', html, css);

变量html和css定义如下（每行末尾都有反斜杠）：

var html = '\
<div class="footer-fix">\
    <p>This is its contents......</p>\
</div>\
';

var css = '\
.footer-fix {\
    background:pink;\
    position: fixed;\
    bottom: 0;\
    z-index: 999;\
    width: 100%;\
}\
';

确保文档准备好后调用此函数！

Answer 2

使用PHP只需创建footer.php文件并在上面插入代码即可轻松完成。然后只需调用include（“/ path / to / footer.php”）;在每个页面的底部和那个。

Answer 3

您可以使用html标记例如：

<body>
<header class="col-lg-12" style="background-color:#444444; ">
    //Here i have Header
</header>

<div class="container-fluid" style="padding:10px; height:600px;">
         // Here goes my Body 
</div>

<footer class="col-lg-12 text-center" style="background-color:#444444; height:50px;">
    //Here Goes my Footer
</footer>

我可以在jquery中避免这个代码重复吗？

3 个答案: