网站Footer导航完美自动固定在底部div+css

网站Footer导航完美自动固定在底部div+css

网站Footer导航完美自动固定在底部div+css,为啥要添加完美呢?因为马上过年,我们需要一个比今年更完美一点

网站Footer导航完美自动固定在底部div+css

 

我们在设计网页的时候,都会遇到一个问题:

我底部导航要在底部,用position: absolute;定位的话,底部导航应该就连接在了内容的最后。如果内容够长超出屏幕效果还是比较理想的。如果内容比较短,那么footer导航直接在半中间。

随后我们就想到了一点,直接用position: fixed;不就好了吗?这样直接永远固定在底部,木有错,这样确实永远固定在了底部,只有中间内容在滑动,这也不是很理想。其实我们实际需要的效果应该是这样的:

网站Footer导航完美自动固定在底部div+css

内容少时:固定在底部

内容超出时:连接在内容底部,滑动到内容结束在显示

大部分都是用js去处理的,但是css也是可以的哦!

原理解释

1.分析:我们把网看成3部分,头部,内容,尾巴。分别写3个div

2.设置内容高度:

首先给html一个高度为100%

* {
	padding: 0;
	margin: 0;
}
html {
	height: 100%;
}

body我们给一个最小的高度为100%和定位,footer基于body定位这样的话 即使内容短footer导航也能固定在底部,内容超出也会连接在下方

body {
	min-height: 100%;
	position: relative;
}

代码演示:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>1</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			html {
				height: 100%;
			}
			body {
				min-height: 100%;
				position: relative;
			}
			.footer {
				height: 100px;
				line-height: 100px;
				background: #8f7af9;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				color: #FFFFFF;
				text-align: center;
				font-size: 30px;
				font-weight: bold;
			}
			.feng {
				padding-bottom: 130px;
			}
			.rui {
				height: 200px;
				line-height: 200px;
				background-color: #4489ca;
				text-align: center;
				color: #FFFFFF;
				width: 80%;
				margin-top: 30px;
				margin-left: 10%;
			}
			.head {
				height: 100px;
				line-height: 100px;
				background: #ef7373;
				width: 100%;
				color: #FFFFFF;
				text-align: center;
				font-size: 30px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="head">
			我是headder
		</div>
		<div class="feng">
			<div class="rui">
				我是一个内容
			</div>
			<div class="rui">
				我是一个内容
			</div>

			<!-- 取消注释预览效果 -->
			<!-- <div class="rui">
				我是一个内容
			</div>
			<div class="rui">
				我是一个内容
			</div>
			<div class="rui">
				我是一个内容
			</div> -->

		</div>
		<div class="footer">
			我是footer
		</div>
	</body>
</html>

 

 

分享到 :
相关推荐

MUI 显示本地上传图片api 单张图片预览

MUI显示本地上传图片api单张图片预览真正彻底的跨平台开发,不是简单的跨iOS和A...

基于ThinkPhp 5.1 导航网工具箱网站带后台微信引流

基于ThinkPhp5.1导航网工具箱网站带后台微信引流,为啥会有这文章呢?因为枫瑞...

利用flex布局横向滚动制作滑动选项卡以及内容滑块

利用flex布局横向滚动首先介绍一下什么是flex布局,为啥喜欢用flex布局呢,枫...

使用Dreamweaver做地图热点且删除热点边框

AdobeDreamweaver,简称“DW”,中文名称"梦想编织者",最初为美国M...

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

评论(5)

  • 枫瑞博客 普通用户 回复 师傅 05/25/2020

    seo太难了,求高手指点迷津

  • 师傅 游客 05/25/2020

    内容挺好,就是seo没做好,页面结果和页面代码做的不够好。搜索引擎不是特别喜欢。

  • 猫鼬 游客 01/04/2020

    好熟悉的博客名。

  • 新闻头条 游客 01/03/2020

    文章不错非常喜欢

  • 伟伟 游客 12/31/2019

    0.0