让footer始终位于页面底部的方法



在此特别感谢LERM乐朦博客(WWW.LERM.NET)的指导!

提出问题:

怎么让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大小。文章转自网络,非原创!


Leave a Comment

Scroll Up