底部固定的两种理解:
一、无视content多高,footer始终固定在底部,随着浏览器窗口高度的减少会覆盖content内容;
二、在乎content高度,当浏览器窗口高度小于或等于content高度时,footer不去覆盖content。
相应解决方案:
一、footer固定定位:
footer{ position: fixed; bottom: 0; left: 0; }
二、footer绝对定位(body相对定位):html
body{position:relative;} /*body相对定位*/ .footer{ /*footer绝对定位*/ position:absolute; bottom:0; left:0; }
但要设置html的高度及body的最小高度,才能撑起来web
html{ height: 100%; } body{ min-height: 100%; }
写到此,会发现footer覆盖了footer上面的一部分content,且给content设置了margin-bottom,没有效果。
缘由:设置了position:absolute,致使margin-bottom无效
解决方法:给content加padding-bottom浏览器
content{ padding-bottom: 必定的值; }