自己在折腾自己的blog时遇到这样的问题,想加一个footer,可位置却不能准确保证在页面底端. 在stackoverflow找到了几种答案,这里自己实际使用加分析一哈. 首先,参考了CSS Stic
自己在折腾自己的blog时遇到这样的问题,想加一个footer,可位置却不能准确保证在页面底端.
在 stackoverflow 找到了几种答案,这里自己实际使用加分析一哈.
首先,参考了 CSS Sticky Footer 用css实现了将footer固定在底端.经过一番分析,提取出关键的样式
html, body, #container { height: 100%; margin: 0; padding: 0; }body > #container { height: auto; min-height: 100%; }/*定位*/#footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; }/*theme*/#footer { background-color: black; color: white; font-size: 200%; text-align: center; line-height: 3em; }这里面更关键的是
html{ height: 100%;}这个关系到页面的大小,如果没有设置,会看到footer确实在底端,但是是页面的底端,如果页面高度较小,footer悬在半空中.
于是很容易想到另一种办法,将上面关于footer的定位样式替换成这样
#footer { clear: both; position: relative; bottom: 0; }这样写,对页面高度是一样有要求的,需要用到上面的html高度的设定.
在 stackoverflow 上的回答有说position用fixed的,实际试用后,确实起到了至于底端的效果,但是存在的问题是footer会遮挡一部分的其他元素.
其他的就不对比了.
