位置：电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) 推荐学习资源
网页布局实战
九宫格实战
当前阅读教程：Flex Box实战教程 > 固定的底栏
阅读(22555525)      收藏       赞(5685)      分享
上一篇： 百分比布局 下一篇： 圣杯布局

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

image.png

HTML代码如下

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>


CSS代码如下

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


完整案例：

image.png

代码如下：

<!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>
 
<div>
01
</div>
 
 
<div>
02
</div>
 
<div>
03
</div>
 
</body>
</html>
上一篇： 百分比布局 下一篇： 圣杯布局
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ：45157718(微信同号)（备注：毕设）