html页脚紧贴页面底部,CSS：页脚紧贴底部

我的练习来源于《CSS揭秘》这本书第7章-41紧贴底部的页脚这部分内容以及书中提到的链接。

方案一

描述：以下方案简单、干净、现代并且没有hack，适用于IE8+, Chrome, Firefox, Opera等浏览器；不需要使用任何标签包裹，因为它是基于可变的body高度；这个解决方案诞生于2012年初，今天也许应该使用更好的方案比如flexbox。

css紧贴底部的页脚

/*footer紧贴底部的主要代码*/

html{

position: relative;

min-height: 100%;

}

body{

margin: 0 0 100px;

}

footer{

position: absolute;

left: 0;

bottom: 0;

height: 50px;

width: 100%;

background-color: green;/*设置颜色方便查看footer位置*/

}

/*调整内容的高度以查看footer紧贴底部的效果*/

.content{

height: 100px;

}

方案二

描述：使用display的flex属性

css紧贴底部的页脚

/*footer紧贴底部的主要代码*/

body{

margin: 0;

display: flex;

min-height: 100vh;

flex-direction: column;

}

footer{

height: 50px;

width: 100%;

background-color: green;/*设置颜色方便查看footer位置*/

}

.content{

flex: 1;

}

方案三

描述：使用 calc()方法

css紧贴底部的页脚

/*footer紧贴底部的主要代码*/

body{

margin: 0;

}

footer{

height: 50px;

width: 100%;

background-color: green;/*设置颜色方便查看footer位置*/

}

.content{

min-height: calc(100vh - 50px);

}

这个div用来撑高度的

(未完待续……)

参考：

http://mystrd.at/modern-clean-css-sticky-footer/【Modern Clean CSS “Sticky Footer”】

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/【Sticky Footer】

http://blog.sina.com.cn/s/blog_4c1e6a010102v6jp.html【vh是相对视口的高度】