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

192

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

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

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

内容少时:固定在底部

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

大部分都是用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;
}

代码演示:

发表评论 (0)

后再参与讨论