CSS 底部固定

底部固定的两种理解:
一、无视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: 必定的值;
}