Flex Box页面布局实战课程-固定的底栏

最新推荐文章于 2022-07-09 14:19:50 发布

黄菊华老师

最新推荐文章于 2022-07-09 14:19:50 发布

阅读量484

点赞数

分类专栏： flex box 文章标签： flex box flex box 视频教程

本文链接：https://blog.csdn.net/u013818205/article/details/87929119

版权

flex box 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
在这里插入图片描述
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

HTML代码如下

<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

CSS代码如下

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

实战效果图
在这里插入图片描述
实战代码

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定的底栏</title>

<style>
.rongqi{ display:flex; flex-direction:column; min-height:100vh;}
.shang{ background-color:#66CCCC; height:60px;}
.zhong{ background-color:#CCC; flex:1;}
.xia{ background-color: #09F; height:60px;}
</style>
</head>

<body class="rongqi">

<div class="shang">
01
</div>


<div class="zhong">
02
</div>

<div class="xia">
03
</div>

</body>
</html>

欢迎大家收看我的视频课程：Flex Box页面布局实战课程
在这里插入图片描述

黄菊华老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flex Box页面布局实战课程-固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。HTML代码如下&lt;body class="Site"&gt; &lt;header&gt;...&lt;/header&gt; &lt;main class="Site-content"&gt;...&lt;/main&gt; &lt;fo
复制链接

扫一扫