【CSS3】页脚区域粘附问题

最新推荐文章于 2021-08-04 10:35:00 发布

原创最新推荐文章于 2021-08-04 10:35:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

CSS3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用CSS3的flex布局实现页脚始终粘附于浏览器窗口底部的效果，即使页面内容不足以填满整个视窗。通过设置body为伸缩容器并调整其属性，可以轻松实现这一布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页脚区域粘附问题是指页脚区域固定在浏览器窗口可视区域底部，即使页面的主体内容不足以将页脚区域推到浏览器可视区域的底部，使用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;
}