网站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>

 

 

枫瑞博客网 一个只想努力找富婆不想努力的人
枫瑞博客网 » 网站Footer导航完美自动固定在底部div+css

5 评论

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

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

  3. 好熟悉的博客名。

  4. 文章不错非常喜欢

  5. 0.0

发表评论