提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

Sticky footers

2023-02-26 12:29:00 时间

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

Flexbox解决方案

解决这类问题，Flexbox是最完美的方案。我们只需要几行CSS代码就可以完美的实现，而且不需要一些奇怪的计算或添加额外的HTML元素。首先，我们需要在<body>元素上设置display:flex。如果父元素(<body>)的三个块元素，使用Flexbox切换布局，还需要设置flex-flow:column
这里我们需要在页头和页脚设置高度，但其内容的高度自动伸缩的来适配剩余空间。我们可以在<main>上设置flex值大于0(常用的是1)

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

body {  display: flex;  flex-flow: column;  } main { flex: 1; }

比如：

<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <style>     * {       margin: 0;       padding: 0;     }      body {       display: flex;       flex-flow: column;       min-height: 100vh;     }      .main {       flex: 1;     }   </style> </head>  <body>   <div class="header">头部</div>   <div class="main">内容</div>   <div class="footer">底部</div> </body>  </html>

Sticky footers

本站部分内容转载自网络，版权属于原作者所有，如有异议请联系QQ153890879修改或删除，谢谢！
转载请注明原文链接：Sticky footers

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏
[[email protected]]
分享 (0)

相关文章