页面底部,CSS：页脚紧贴底部"/>
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用来撑高度的(未完待续……)
参考：
/【Modern Clean CSS “Sticky Footer”】
/【Sticky Footer】
.html【vh是相对视口的高度】
更多推荐
html页脚紧贴页面底部,CSS：页脚紧贴底部
发布评论