让页脚紧贴页面底部的CSS代码
Google一下可以找到很多让页脚紧贴页面底部的方法，我试过其中的很多，但他们总会在某些方面存在一些问题。之所以有这些问题，可能是因为出现了更新版本的浏览器。一些方法因为太过久远，原本在老版本浏览器可以正常工作，却不再适用更新之后的版本。也因为这些页面太过久远，过去曾被大量链接过，所以在Google的结果中排名很高。这样，一些网站管理员在搜索sticky footer方案的时候，对搜索出的结果都很挠头，因为排在搜索结果前列的方法都有这样那样的问题。
众所周知的是Ryan Fait的方案，它的确工作的很好。但是，它必须要单独写一个没有内容的div，来提供额外的"push"。对HTML语义要求严格的人可以说代码这么写是不符合规范的，我们的方案不用附加的div。
将要介绍的Sticky Footer方案是建立在Exploring Footers article from A List Apart成果的基础上，并受到Cameron Adams和作的启发。在Google Chrome和其他浏览器中，当你缩放窗口的时候，页脚会浮上来。该方案会应用一种Clear fix hack方法，把页脚固定在适当的位置上，这种方法同时也解决了页面布局是两列或三列悬浮可能会带来的问题。在超过50种以上的浏览器测试中，它都能很好的工作。
你会发现，页脚的高度在这里被重复使用了三次，这是至关重要的，而且三个高度必须使用同样的值。wrap的height属性把自己拉伸至窗口全部高度的尺寸，负的margin会把footer提高到main的padding的位置上去，因为main已经在wrap的里面，所以main的padding已经是wrap 100%高度的一部分。 这样，footer就留在页面的底部了。
多数SS designers对Clearfix Hack很熟悉，它解决了很多元素悬浮的问题，在这里，我们用它使得Google Chrome里面的页脚紧贴页面底部。它同时也解决了两列悬浮布局所带来的问题。这样你就可以把内容放在一列，sidebar放在另一列，不会出现个别浏览器下面main里面的悬浮的内容导致页脚浮上来的情况。
Header，wrap或者main标签内部，如果对一些元素使用top或者bottom margin，可能会出现footer被向下移动的现象，移动距离一般是所用的margin的高度。这种情况下，可以使用padding替代margin来填充元素间隙。在页面内容少的情况下，footer本来应该在页面的底部，窗口的滚动条告诉你footer在页面底部偏下的位置。找到那个捣乱的margin，并用padding替换掉。
为main声明padding的时候要多加小心，如果你添加了这样的代码：padding:0 10px 0 10px，你就覆盖了那个至关重要的本来应该和footer一样的padding。Google Chrome中，在页面内容很多的情况下，footer就会和你的页面内容重叠在一起。
设置字体大小的时候，如果你使用相对尺寸，要注意有些访问者可能会在显示器配置中使用较大字体。如果footer下面没有剩余足够的空间来容纳大字体，页面高度的设置就会被破坏，从而导致footer下面有多余的空隙。所以，请使用
课程开始： 前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动&...查看详情
上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条【第四步】 我们需要将上面的导航条做以下几个修改 1）给上面的导航加上链接； 2）链接文字大小修改为12px; 3）并且规定链接样式，鼠标移上去和拿开的效果 修改方法如下 1...查看详情
【第一步 整体布局与公共CSS定义】我们先来分析一下这个页面页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图 下载 (116.12 KB)2009-6-1 09:22这样HTML就很容易写出来了复制代码代码如下: <div ...查看详情
【第七步 内容左侧板块(ContentL)布局】 我们分析一下他的结构，主要包括标题和文章内容两块，并且标题和内容之间有一条虚线，而第二篇文章的内容部分是图片和文字相结合且文字环绕图片。 好~！既然搞清楚结构了，后面我们布局就容易了 我打算标题用<h1>标签，为什么这...查看详情
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素asp学习，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用...查看详情
如果你还是不能太明白这句话，我们就做个实例，把我们第5节页面的头部blog区域用定位(position)来布局一下 HTML代码和原来的没有区别： 复制代码代码如下: <div id=Logo> <a href=# id=logoLink>&l...查看详情
说到浏览器兼容性问题，就必须说CSS Hack！提到Hack大家肯定会想到电脑黑客(hacker)、和病毒程序联系到一块，不过在CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法。说的更直白一些就是，你平时做个页面，布局正确，CSS正确，可就是在不同的浏览器中显...查看详情
代码如下： HTML代码： 复制代码代码如下: <a id=theLink></a> CSS代码： 复制代码代码如下: #theLink{ display:block;/*因为标签a是内链元素，所以利用这句话将内链元素转化成块状元素，后面的width和...查看详情
前言为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式asp代码加密工具有哪些类型，文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。新的IE为了确保网页在未来的版本中都有一支的外观，IE8引入了文件兼容性。当你引入一个增设的兼容性模式，...查看详情
使用CSS来修饰滚动条 1．overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．scrollbar-3d-ligh...查看详情
