现在自适应网页设计备受网页设计师欢迎，页脚是网页不可忽视的一部分，那么今天就分享一下自适应网页设计制作页脚方法。

自适应网页设计

 

  　1、让 footer 能够刚好在最下方的方法，可以给footer加一个等于自身高度的上方的负边距强制把它向上推一个自身的高度，即 margin-top: -50px; 。如此当内容超过一屏我们会看到内容会盖在 footer 的上方，因此我们还要给 content-box 和 sidebar 加一个父级元素，设定下方内补丁等于 footer 的高度，强制把 content-box 和 sidebar 向上推一个footer 的高度。同时，因为 content-box 和 sidebar 是浮动元素，所以我们还需要闭合浮动元素 。

     2、加上页头页脚和内容部分，为了让 footer 在最下方，我们当然要把 footer设置wrapper 之外。当然，为了防止高度就超过一屏了，需要照下面做。
#header { background: Green; height: 40px; } #sidebar { float: left; width: 200px; background: Gray; } #content-box { float: right; width: 570px; background: Olive; } #footer { height: 50px; background: Background; width:770px; margin: auto; }
     3、为了让浏览器识别高度100%在设计时需要先给html和body加上一个高度值，同时清除所有元素的margin和padding。此外，html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度，无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。
* { margin: 0; padding: 0; } html, body { height: 100%; }
     为了让布局自适应高度，我们要加上 min-height: 100%;，虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用：

#wrapper { min-height: 100%; } * html #wrapper { height: 100%; } 

     这样，页脚最小高度满一屏的自适应布局就做好了。

文章由上海网站建设公司昭歌信息整理发布https://www.zhaoge.net/，转载请注明出处