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

最新推荐文章于 2024-07-13 10:04:53 发布

front_end_fan

最新推荐文章于 2024-07-13 10:04:53 发布

阅读量8.2k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_39198420/article/details/77505663

版权

css 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

提出问题：

怎么让footer定位在页面底部，要求主体内容少的时候footer在可视化窗口的最下方，主体内容非常多的时候
footer在主体内容的下面？

尝试解决：

方法1.如果把footer直接放在主体内容后面，让主体撑开把footer撑到下面去，主体内容多了可以，但是内容少了的话
，footer撑不起来就会显示在中间很难看
方法2.如果直接把footer悬浮起来固定在屏幕最下方，主体内容少了没事，内容多了，footer就会遮住主体内容
（relative/absolute/fixed都不行）（relative/absolute内容少的时候，footer会跑到页面之间去，
fixed在内容多的时候会遮住主题内容区域）

都不行！
只能用flex布局，或者借助js

html代码结构为：

第一种情况：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大小。