怎么让footer始终在页面底部？

最新推荐文章于 2022-05-25 08:45:01 发布

周四宝

最新推荐文章于 2022-05-25 08:45:01 发布

阅读量3k

点赞数 3

分类专栏： html+css

本文链接：https://blog.csdn.net/panzhou_style/article/details/50482716

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当页面内容少时，footer页尾显示在屏幕的底部（一般会向上浮动，在屏幕的中间）。

当页面内容多是，footer页尾也不会固定在屏幕的下方而是显示在整个页面的底部。

怎样才能实现以上两种效果呢

代码如下：

<style type="text/css">
html,body{
	margin:0;
	padding:0;
	height:100%;   /*必须*/
}
#contain{
	width:100%;
	min-height:100%;
	height:auto;
	position:relative;
}
#header{
	width:100%;
	height:50px;
	background:#f90;
}
#content{
	width:1200px;
	margin:0 auto;
	height:auto;
	padding-bottom:50px; /*等于footer的高度*/
}
#footer{
	width:100%;
	height:50px;
	background:#f90;
	position:absolute;
	bottom:0px;    /*使footer固定在contain的底部*/
}
</style>

<body>
<div id="contain">
	<div id="header">
    	我是头部
    </div>
	<div id="content"> 
    	<div>内容</div>
        <div>内容</div> 
        <div>内容</div>
        <div>内容</div>
        <div>内容</div>
     
     
	</div>
	<div id="footer">
    我是尾部
    </div>
</div>
</body>

周四宝

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
怎么让footer始终在页面底部？

当页面内容少时，footer页尾显示在屏幕的底部（一般会向上浮动，在屏幕的中间）。当页面内容多是，footer页尾也不会固定在屏幕的下方而是显示在整个页面的底部。怎样才能实现以上两种效果呢
复制链接

扫一扫

专栏目录