sticky-footer的三种解决方案

sticky-footer的三种解决方案

         在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送,我们看到的效果就如下面两张图这样。这种效果基本是无处不在的,很受欢迎。

那么面对这样的问题有什么解决方法呢?

首先我们先构建简单的代码

<body>
  <div class="content"></div>
  <div class="footer"></div>
</body>

其中content为我们的内容区。下面开始介绍解决方法。
一、为内容区域添加最小的高度

这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度,从而求得内容区域的最小高度。例如我们可以添加如下样式:

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}    

从而这个问题就解决了,但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次,这是很麻烦的,所以这种方法虽然简单但却是不推荐的。

二、使用flex布局
  这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0,这样footer获得其固有的高度;content的flex设为1,这样它会充满除去footer的其他部分。

代码如下:

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}

这样的布局简单使用,比较推荐。


三、在content的外面可以添加一个wrapper

  这种方法就是在content的外面添加一个包裹容易,将html代码改成这样:

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div> 
  <div class="footer"></div>
</body>

    然后添加以下样式:

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;
}

另外,为了保证兼容性,需要在wrapper上添加clearfix类。其代码如下:

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div> 
  <div class="footer"></div>
</body>
.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    

ok,好,完成了,这种方法也比较推荐,但就是加入的代码比较多,也改变了html的文档结构。

参考:CSS秘密花园: Sticky footers

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		html, body, .wrapper {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        
        body>.wrapper {
            height: auto;
            min-height: 100%; 
            background: #f00;
        }
        .content {
            padding-bottom: 200px;
            font-size: 30px;
        }
        .footer {
            position: relative;
            margin-top: -200px;
            /* footer高度的负值 */
            height: 200px;
            clear: both;
            width: 100%;
            color: white;
            background: black;
            font-size: 20px;
        }

		.clearfix{
		     display: inline-block;
		}
		.clearfix:after {
		     content: ".";
		     display: block;
		     height: 0;
		     clear: both;
		     visibility: hidden;
		}   
	</style>
</head>
<body>
	<div class="wrapper clearfix">
		<div class="content">
			这种效果不仅是无处不在,很受欢迎,而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外,在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的,很少是可行的。实际上实现这个效果过于复杂,而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制,但使用现代CSS,我们能把这个效果做得更好,那要如何做呢?

			如果你从未看过这样的效果或者对这个问题的相关资料感兴趣的话,这里有一些受欢迎的文章,提供
		</div>
	</div> 
	<div class="footer">
		这似乎略优于现有的固定高度的解决方案,主要是由于其简单。然而,除了简单的布局,但这是不切合实际。它要求我们每次都要计算包裹页脚文本容器的高度,这样我们需要每次计算容器的min-height。除非我们愿意添加HTML容器来包裹我们的标题和内容,不过同意也要计算。当然,在这个时代,我们可以做得更好,对吗?著作权归作者所有。
	</div>
</body>
</html>

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值