当一个网页比较简单，内容比较少使得网页不足浏览器高的时候，为了显示更合理，我们希望让 footer 部分显示在浏览器的底部。先前介绍了《使用CSS定位页面的“footer”》，现在来用 javascript 来实现这种效果。
基本思路
以常见的架构来为例，容器 #container 内有上中下三部分，分别为 #header 、#content 、#footer。首先分别获取容器 #container 和浏览器的实际高度，如果容器 #container 的高度小于浏览器的高度，就让 #footer 绝对定位到底部。
代码实现
XHTML 代码：
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
javascript 代码：
window.onload = function(){
var containerHeight = document.getElementById("container").scrollHeight;
var footer = document.getElementById("footer")
var allHeight = document.documentElement.clientHeight;
if(containerHeight < allHeight){
footer.style.position = "absolute";
footer.style.bottom = "0"
}
else{
footer.style.positong = "";
footer.style.bottom = "";
}
}
</script>
解释一下两个重要的属性 scrollHeight 和 clientHeight：
scrollHeight 层的实际高度，实际有多高就多高，与当前网页高度无关；
clientHeight 层在当浏览器屏幕的高度，非该层的实际高度。
为了让例子效果更明显，再加上一些 CSS 代码：
margin:0;
padding:0;
}
#header{
background:#ff0000;
}
#content{
background:#00CCFF;
}
#footer{
background:#FFCC00;
width:100%;
}
这样，如果网页的高度小于浏览器的高度，那么 footer 部分就会定位到底部。
使用CSS定位页面的“footer”
日期：2008-11-29 | 分类：CSS
基本思路
首先考虑外层设置一个容器 div ，id 设为 #container ，使他的高度为浏览器窗口的高度，然后将 #footer 这个 div 设置为 #container 的子 div，并使用绝对定位的方式，使他固定到 #container 的底端，以实现希望的效果。
点击这里察看案例页面效果。 改变浏览器的高度和宽度，可以看到 Footer 部分的效果。
代码实现
下面先考虑HTML结构，这个演示页面的HTML代码非常简单。
<div id="content">
<h1>Content</h1>
<p>请改变浏览器窗口的高度，以观察footer效果。</p>
<p>这里是示例文字，………，这里是示例文字。</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>
然后设置CSS，
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#container {
min-height:100%;
position: relative;
}
#content {
padding: 10px;
padding-bottom: 60px;
/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
1：首先要给 html 和 body 元素设置高度（height属性）为100% （第5行），这样先保证根元素的高度撑满整个浏览器窗口，然后下面才能使 #container 的高度撑满整个浏览器窗口。至于为什么用同时设置 html 和 body 元素，是因为 Firefox 和 IE 认为的根元素不一样，因此这里都给他们设置上。
2：然后把 #container 的高度也设置为 100% （第8行），但是要注意，这里使用了“min-height”属性，而不是普通的 height 属性，这是因为我们要考虑到，如果 #content 中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把 #container 的高度仍然是 100%，就会导致 #footer 仍然定位在浏器窗口的下端，从而遮盖了 #content 中的内容。而使用 min-height 属性的作用就是使 #container 的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。
但是需要说明的是，在 Firefox 和 IE7 中，支持 min-height 属性，而 IE6 中，并不支持 min-height 属性，但是“歪打正着”的是，IE6 中，会把 min-height 属性解释为 height 属性，但是 IE6 中 height 属性的效果却是 min-height 本来应该具有的效果，也就是说，在 IE6 中，子 div 的高度会撑大父 div 的高度。所以这样正好可以实现在 IE6、IE7 和 Firefox 中都可以正确实现我们希望的效果了。
3：接下来，将 #container 设置为相对定位（第9行），目的是使他成为它里面的 #footer 的定位基准，也就是所谓的“最近的定位过的祖先元素”。
4：然后把 #foooter 设置为绝对定位（第17行），并使之贴在 #container 的最下端（第18行）。
5：但是要注意，如果当我们把 #foooter 贴在 #container 的最下端以后，他实际上已经和上面的 #content 这个div 重叠了，为了避免覆盖 #content 中的内容，我们在 #contetn 中设置了下侧的 padding，使 padding-bottom 的值等于 #footer 的高度（第13行），就可以保证避免覆盖 #content 的文字了，这个高度的计算注意代码中的注释中给出的计算方法（第14行）。
文章摘自：前沿视频教室
原文地址：http://learning.artech.cn/20080328.css-footer-position.html
ie img 3px bug
日期：2008-11-22 | 分类：CSS
ie img 有 3px 的缝隙也是 ie 的经典 bug 之一，相信已经不陌生了，但还是先看看效果吧（也许你并没有见过）：
效果1 图片下方有缝隙，这是最常见的；效果2 则不但下面有，右边也有，并且在 FF 和 opera 里，下方也有缝隙。这是因为效果2 图片的父元素是内联元素。
这个缝隙的大小网上说是 3px ，其实在 ie 里是 4px （你可以设置图片父元素的负 margin 测试），而效果2 在 FF 里下方有 3px 的缝隙，在 opera 里下方有 2px 的缝隙。
这个小缝隙在有些情况并不会造成太大的影响，不修复也没有关系；但如果对有些情况影响较大，那就不得不修复了。修复方法有很多：
1、改变XHTML排版，让 img 的后面紧跟标签（若没有文字的话），如：
而不是：
<img src="" alt="" />
<div>
2、为 img 设置 display:block ；
3、为父元素设置 font-size:0 ；
4、为 img 设置 vertical-align 属性，值可以是: top|bottom|text-top|text-bottom （其他值效果不好或没有效果）。
但是：
如果图片的父元素是内联元素的话，选择第 3 种方法，在 ie 里右边仍有 1px 的缝隙，而在 opera 里下方仍有 2px 的缝隙，请用相应的浏览器查看下面的效果：
如果图片的父元素是内联元素的话，选择第 4 种方法，在 ie 里只能修复下方的缝隙，而右边的缝隙则不能修复。看效果：
如果图片的父元素是块级元素的话，上面 4 种方法都能完全修复此 bug 。但为了保险，选择第1 、第2 种方法更妥当。
用CSS制作彩色文字
日期：2008-11-20 | 分类：CSS
网页上的文字和美观的图片相比似乎显得比较单调，因为文字只有颜色、字体、大小等效果。那如何才能让文字更有特点呢？那就让文字变成彩色的吧，不过不是每个文字设置不同的颜色（当然也有这样的，比如google的logo，虽然用的并不是文本，但用文本也可以实现），是文字的上半部分和下半部分颜色不用。先看一下效果吧：
其实这里有两个相同的但颜色不同文本，他们重叠在一起了，一个显示上半部分，一个显示下半部分，合在一起就达到了彩色的效果。
所用到的关键属性是 clip ,此属性 CSS手册上的说明是：
我们一步一步来做。先做上半部分的文字：
XHTML代码：
CSS代码：
color:#cc0000;
font-size:24px;
clip:rect(auto auto 15px auto);
position:absolute;
}
查看效果，效果如下图左边所示。
下半部分：
XHTML代码（除了 class ，其他和上面相同）：
CSS代码：
color:#3399ff;
font-size:24px;
clip:rect(15px auto auto auto);
position:absolute;
}
查看效果，效果如下图右边所示。
把代码合在一起，就达到了最终的效果：
XHTML代码：
<a href="#" class="textTop">多彩文字 multicolor</a>
<a href="#" class="textBottom">多彩文字 multicolor</a>
</div>
CSS代码：
position:relative;
}
.container a{
position:absolute;
font-size:24px;
}
.textTop{
color:#cc0000;
clip:rect(auto auto 15px auto);
}
.textBottom{
color:#3399ff;
clip:rect(15px auto auto auto);
}
查看最终效果，最终效果如最上图所示。
半透明效果越来越常见，如果应用的好的话，能给网页带来很美观的效果。
由于各个浏览器差异，所以半透明效果实现起来还是有一点麻烦的。
IE 使用滤镜，即 filter:alpha(opacity=x) ，x 取值范围为 0 - 100 。默认值为 100 ，不透明。 0 为完全透明。
FF 使用其私有属性：-moz-opacity ，其后直接加数值，取值范围为 0.0 - 1.0 。默认值为 1 ，不透明。 0 为完全透明。
CSS3 半透明属性 opacity ，其后也是直接加数值，取值范围同样为 0.0 - 1.0 。
虽然 IE 和其他浏览器实现的方法不一样，但一起用，就都有效果了。看例子：
XHTML代码：
<br />
<br />
<div id="box">
<br />
<br />
</div>
<br />
<br />
</div>
CSS代码：
background:#FF0000;
}
#box{
background:#fff;
filter:alpha(opacity=60); /* for ie */
opacity:0.6; /* for ff or other */
width:100%;
}
虽然 FF 有私有属性设置半透明效果，但它支持 CSS3 标准半透明属性 opacity ，那当然选择标准了。
从效果里可以看到子元素的半透明效果，透出了父元素的背景颜色。
要注意的是：必须给需要半透明的元素设置背景颜色为白色，否则没有效果。而对于 IE 又还需要设置宽度或高度属性，否则也没有效果。如上例把 width:100% 去掉则没有效果。
还需要说明的是：IE 滤镜不能通过 W3C 验证。
