、必要的信息不能少

在浏览网站时，可以发现，大多数网站的页脚包含了企业简单业务介绍、联系信息、版权保护以及其它关联网站等等，当用户在网站上没有发现明显的联系方式，他们基本上都会把网页拉到页脚寻找信息，能让他们快速找到目标内容可以减少网站跳出率。

2、让页脚变得好看

最基本也是最有效的方法是让页脚变得好看，就算页脚没有任何东西（按钮、链接等），只要视觉效果出众，它依然可以成为网站整体中有力的那部分。如果你想让网站尽可能地保持干净简洁，那就要防止网站看起来乏味无聊。无论如何，在网站页脚的视觉细节上花点功夫，才能把用户的注意力抢过来。

3、充分利用空间

网站页脚的设计是在有限的空间内展示最精辟的内容，对于这部分的空间要充分利用起来，对要使用的图标，文字，图片等内容进行排版设计，但在安排这些元素的同时要懂得留白，避免出现密密麻麻的内容扎堆情况，否则影响网站美观的同时也产生了用户阅读困扰。

4、合理安排链接

页脚内容对排布和分类要求较高，毕竟所占据的<1>板块区域较小，因此要遵循以简洁明了的形式展示最直接和全面的内容，无论是网站基本内容的目录，还是联系方式，有或者是友情链接，最好进行组织分类，通常情况下，这些内容都是以概括的形式展示，更多详细内容以链接跳转的形式，对此要合理安排好链接，保证好用户体验，以防出现死链或者空链。

5、勿使用链接下划线

转载于佛山镐站网http://www.wangluo379.cn/zixun/gongsidongtai/2739.html

网站页脚还是添加链接时候，千万不用再页脚链接使用下划线的形式，我们就需要给页脚一个干净整洁的，包含大量链接的页脚。

6、注意内容的可读性

页脚内容不如网站主题部分，页脚内容只是容纳很少一部分信息，并且这种信息不是很重要但是确实网站必须。我们在设计网站页脚内容就需要让内容变得具有可读性。还有就是页脚内容的文本元素和背景颜色都需要跟网站主题部分进行区分，这样做的好处就是让网站页脚和网站主题部分形成鲜明的对比。

7、不要过于复杂

页脚和页头的设计有所区别，它并不需要跟页头的导航栏或者BANNER图设计那样过多的注重交互性以及个性化，反而是简洁有力的页脚更加有利于用户体验。通常采用极少的色彩元素并和网站整体风格一致，尽量避免图片背景形式，如需让内容显得丰富些，就选择图标和文字结合的形式来展现，且内容也不宜过多，应简洁。

8、避免头重脚轻

有些网站在设计的过程中并没有明确的页脚概念，往往把页头做得很耀眼，但是整站往下拉，却没有页脚的踪影，又或者是将页脚看作最次要的一部分，所使用的字体小，内容粗略，且没有将文字与背景对比度考虑在内等等，无形中就造成了用户不愉快的阅读体验，按照用户的浏览习惯，从网站页头浏览下来，体验效果都还不错，但一到页脚就一头雾水，这种头重脚轻的现象就造成了用户不好的印象。

加style

<style type="text/css">
 html {
 position: relative;
 min-height: 100%;
 }
 body {
 margin-bottom: 60px;
 }
 .footer {
 position: absolute;
 bottom: 0; width: 100%;
 /* Set the fixed height of the footer here */
 height: 60px;
 background-color: #f5f5f5;
 }
</style>
.......
.....
</div>
<footer class="footer">
 <div style="text-align:center;">
 Copyright 2019 by Ben
 </div>
</footer>
</body>

image.png

效果图，不管窗口放大还是调小，footer 都会 显示在最底也，也不会覆盖content 里面的内容。

近，项目中需要给每个页面加入页脚，也就是一个网站由某某某公司开发什么的把，如下图，实现功能：出现纵滚动条时，页脚在页面内容的最下面；不出现纵滚动条时，固定在窗口的最最下面

网上也有许多用CSS布局来实现页脚的，但是任然不够灵活，可能页面稍微变化下大小、比例、屏幕变化下分辨率什么的，这个CSS的布局可能就不起作用了，js才是万能的~

简单介绍下js设置页脚的形式

1、写一个共同的footer.jsp画面，可以用其他jsp去include

以下是我写的代码，其中红框位置是需要特别注意的地方：

2、需要调用footer.jsp的页面，如下截图

其中，重点部分用红框标出，实现步骤

（1）、include footer.jsp页脚，页脚初始化的时候调用setFooter()一次

（2）、在window大小变化，或者是滚动条滑动时，都会相应setFooter()方法

这样就可以实现动态设置页脚的位置了

3、实现GIF：

题外话

1、算出滚动条的宽度：

$("body").outerWidth() + ";" + $(window).width()

2、得到画面组件的各种宽、高：