css让footer始终位于页面的最底部

最新推荐文章于 2024-06-12 16:49:26 发布

hlinghoney

最新推荐文章于 2024-06-12 16:49:26 发布

阅读量2.9w

点赞数 3

分类专栏： web前端开发文章标签： css

本文链接：https://blog.csdn.net/hlinghling/article/details/50967249

版权

web前端开发专栏收录该内容

35 篇文章 0 订阅

订阅专栏

html代码结构为：

<div class="container">
<div cass="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>

第一种情况：footer随着进度条的滚动而滚动

.container{width:100%;min-height:100%;position:relative;}
.body{padding-bottom:50px;}
.footer{height:50px;position:absolute;bottom:0px;left:0px;}

第二种情况：footer固定在底部

.container{width:100%;min-height:100%;position:relative;}
.body{padding-bottom:50px;}
.footer{height:50px;position:fixed;bottom:0px;left:0px;}

第三种实现方法：让footer固定在底部（转自阮一峰老师博客）

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

注意的问题：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

主要代码：

//HTML代码如下
<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

//CSS代码如下
.Site {
  display: flex;
  display: -webkit-flex; /* Safari */
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

ps:解释一下vh: vh是相对于视窗的高度,视窗高度是100vh;视窗是指浏览器内部可视区的大小，window.innerWidth、window.innerHeight大小。

hlinghoney

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
css让footer始终位于页面的最底部

html代码结构为：<div class="container"><div cass="header"></div><div class="body"></div><div class="footer"></div></div>第一种情况：footer随着进度条的滚动而滚动.container{width:100%;min-height:100%;position:relative;}.b
复制链接

扫一扫

专栏目录