今天花了点时间重写了404错误页面的模板,原来的没有头部,没有尾部,只是很简单的一个错误提示,而且由于是独立页面,和我的网站风格完全不是一回事。于是便给他加上了 头部(header)和尾部(footer)。
本来以为前后加上<?php get_header(); ?>和<?php get_footer(); ?>就完事了,但是没想到打开404页面后居然页面完全一团乱。又看了一下,发现是header中包含有未闭合标签。于是只好重新编辑一下。
最后是页面底部,这个我发现,由于404页面很简单,只有一个错误提示框,高度只有三百多,所以当我将footer直接加在body的最下方,由于电脑屏幕高度远远大于三百,所以导致footer底部部分下方还有一片无内容区域,显得突兀又难看。
我想的第一种方法是直接将container高度设置为1000px,这样基本上在主流的浏览器上都可以保证footer部分下方不会空出来了,不过这样一来在许多电脑上由于分辨率的问题而会出现长长地滚动条。
于是上网找方法,真是五花八门。基本上都是JavaScript配和css做的。唉,搞个几乎没人会看到的404页面也值得这么大动干戈么?我记得原来在博客大巴开的一个博客在页面左上角和右下角各有一个返回底部和返回顶部的固定按钮,只使用css就搞定了。只是这么久了,我已不记得当时如何做的了,不过跟position定位有关。
于是我又打开博客大巴那个博客,看了一下后台代码,果然,纯css完全就可以实现一个层固定在浏览器的各个方位。关键就是positon——
position: fixed;
#position: fixed;
_position: absolute;
下面的#和_开头的是hack,写过css一定都不会陌生。因为IE6不支持CSS中的position:fixed属性。关于positon
的四个属性的含义不明白的同学请自查。
绝对定位以后,直接bottom:0;就ok了。不管你的浏览器分辨率再大,底部(footer)永远在底部了。。哈哈。
不过应用绝对定位也不是绝对好,比如我这样的话如果某人将浏览器缩小,高度不足400,那么就会出现footer遮挡了。不过,没人会将浏览器所那么小浏览网页吧。。。。