哪家网站游戏做的比较好,优化网站推广教程排名,电子商务网站的建设,办公室装修图2019独角兽企业重金招聘Python工程师标准 我的练习来源于《CSS揭秘》这本书第7章-41紧贴底部的页脚这部分内容以及书中提到的链接。 方案一 描述#xff1a;以下方案简单、干净、现代并且没有hack#xff0c;适用于IE8, Chrome, Firefox, Opera等浏览器#x… 2019独角兽企业重金招聘Python工程师标准 我的练习来源于《CSS揭秘》这本书第7章-41紧贴底部的页脚这部分内容以及书中提到的链接。 方案一 描述以下方案简单、干净、现代并且没有hack适用于IE8, Chrome, Firefox, Opera等浏览器不需要使用任何标签包裹因为它是基于可变的body高度这个解决方案诞生于2012年初今天也许应该使用更好的方案比如flexbox。 !DOCTYPE html
html
headmeta charsetutf-8 /titlecss紧贴底部的页脚/title
/head
style typetext/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;
}
/style
bodydiv classcontent/divfooter/footer
/body
/html 方案二 描述使用display的flex属性 !DOCTYPE html
html
headmeta charsetutf-8 /titlecss紧贴底部的页脚/title
/head
style typetext/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;
}
/style
bodydiv classcontent/divfooter/footer
/body
/html 方案三 描述使用 calc()方法 !DOCTYPE html
html
headmeta charsetutf-8 /titlecss紧贴底部的页脚/title
/head
style typetext/css
/*footer紧贴底部的主要代码*/
body{margin: 0;
}
footer{height: 50px;width: 100%;background-color: green;/*设置颜色方便查看footer位置*/
}
.content{min-height: calc(100vh - 50px);
}
/style
bodydiv classcontentdiv styleheight:1000px;这个div用来撑高度的/div/divfooter/footer
/body
/html 未完待续…… 参考 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是相对视口的高度】 转载于:https://my.oschina.net/u/1165991/blog/746765
