footer保持在页面底部的两种方法

css代码*{margin:0;padding:0;}html,body{height:100%;}#container{/*确保页脚相对于容器绝对定位*/position:relative;宽度：100%；最小高度：100%；/*设置padding-bottom值大于等于footer的height值，保证主要内容可以显示，不会被footer遮住；*/padding-bottom:100px;框大小：边框框；}header{宽度：100%；高度：200px；背景：#999；}.main{宽度：100%；高度：200px；背景：橙色；}页脚{宽度：100%；高度：100px；/*页脚的高度必须是一个固定值*/position:absolute;底部：0px；左：0px；background:#333;}方法二：采用flexbox布局模型思路：我们设置body的display属性为flex，然后设置direction属性为column，（默认为row，即水平布局）；同时将html和body元素的高度设置为100%，让它们填满整个屏幕。css代码*{margin:0;填充：0；}html，正文{高度：100%；}#container{显示：flex；弹性方向：列；高度：100%；}标题{背景：#999；flex:0060px;}.main{背景：橙色;弹性：10自动；}页脚{背景：#333；弹性：0060像素；}