通过flex布局时footer始终在页面底部

最新推荐文章于 2022-09-27 14:19:37 发布

weixin_34161029

最新推荐文章于 2022-09-27 14:19:37 发布

阅读量357

点赞数

原文链接：http://www.cnblogs.com/qianphong/p/10615493.html

版权

在页面布局时通常会遇到这样一个问题，页面内容太少时无法将内容区域撑开，从而使得footer下方有留白，使用flex布局可以很简单的解绝这一问题。

html代码如下：

<body>
      <header>header</header>
      <section class="main">content</section>
      <footer>footer</footer>
</body>

将body的display属性设置为flex，然后将方向设置列，同时将html和body都高度设置为100%，使其充满整个屏幕。

html{
    height:100%;
}
body{
    height:100%;
    display:flex;
    flex-direction:column;
}

接下来设置flex的三个属性值就可以了（三个值都不支持负数）：

flex-grow：设置剩余空间分配情况。flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。不允许负值。

flex-shrink：父元素宽度小于子元素宽度之和时，子元素如何缩小自己的宽度的。默认值为1时表示超出地方平均分配。设置值越大，减小的越厉害。如果值为0，表示不允许收缩，设置多大就多大，当都设置为0是子元素会超出父元素。

flex-basis：该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。basic简单理解就是在计算剩余空间分配前去掉的空间，值为auto/具体的width/0。

下面只需要将剩余空间全部给主体部分，header和footer不分配剩余空间，仅占据自身大小的空间即可。

header{
    /* 我们希望 header 采用固定的高度，只占用必须的空间 */
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex：0 0 auto；
}
section{
    /* 将 flex-grow 设置为1，该元素会占用全部可使用空间 
      而其他元素该属性值为0，因此不会得到多余的空间*/
    /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
    flex：1 0 auto；
}
footer{
    /* 和 header 一样，footer 也采用固定高度*/
    /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
    flex：0 0 auto；
}

最终footer会始终在页面底部。

转载于:https://www.cnblogs.com/qianphong/p/10615493.html

weixin_34161029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过flex布局时footer始终在页面底部

在页面布局时通常会遇到这样一个问题，页面内容太少时无法将内容区域撑开，从而使得footer下方有留白，使用flex布局可以很简单的解绝这一问题。html代码如下：<body> <header>header</header> <section class="main">content</section&gt...
复制链接

扫一扫