【CSS3】页脚区域粘附问题

页脚区域粘附问题是指页脚区域固定在浏览器窗口可视区域底部,即使页面的主体内容不足以将页脚区域推到浏览器可视区域的底部,使用CSS3实现就很简单

最关键的技巧是让body设成伸缩容器,并且使用flex属性让footer之前的元素具有伸缩属性。

如果希望整个页面的布局要和浏览器窗口可视区域一样高,首先需要保证html和body元素的高度要和浏览器窗口的可是区域高度一样。代码如下

html,body{
    height:100%;
}
body{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flex-box;
    display:-webkit-flex;
    display:flex;
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -webkit-box-lines: multiple;
    -moz-box-lines:multiple;
    -ms-flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}
#page{
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-flex:1;
    -webkit-flex:1;
    flex:1;
}

你可能感兴趣的:(css3)