网站制作页脚如何自适应布局设置模板

网页设计是指使用标识语言(markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面(gui)的形式被用户所浏览。下面小编给大家分享的是学习网站制作页脚如何自适应布局，在这里详细的介绍了学习网站制作页脚如何自适应布局 ，希望对大家有所帮助.

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%; }2、因为上面提到的问题，所以为了让布局自适应高度，我们要加上 min-height: 100%;，虽然ie不支持这个属性但是ie的 height: 100%; 有同样的作用：

#wrapper { min-height: 100%; } * html #wrapper { height: 100%; } 这样，一个最简单的最小高度满一屏的自适应布局就做好了。

【网站制作页脚如何自适应布局】相关文章：

网站页脚设计小技巧09-09响应式网站布局设计10-04如何布局网页主体09-21wps文字如何布局页面09-29网页设计：网站布局的23个步骤10-04word2007中页眉页脚如何插入页码09-17如何做好自适应网页的设计09-14dreamweaver窗口如何布局的方法08-02制作网站的基本流程09-24https网站如何优化？09-14