您的位置：首页 > Web前端 > CSS

如何用css实现网页footer的效果

2017-02-22 12:08 676 查看

实现footer这个问题比较常见，基本上每个公司都会有自己的页脚来声明版权，来提供一些商务合作，或者说是联系方式，加入我们等。。

我之前也没有仔细思考过这个问题，以为就是在footer css当中设置一下bottom: 0 就可以了，但是今天亲自实践了才发现，有以下几种情况：

（1）如果footer所在的div没有父级div，footer的定位为absolute直接设置bottom: 0就可以实现footer，但是当内容超过屏幕的高度的时候，超过屏幕高度的内容就在footer的下面了。这里如果footer的定位为relative会与absolute有区别,而如果是static定位的话，浏览器会忽略left,right,top,bottom。

（2）如果footer所在的div有父级div，而父级div如果是static，footer定位是absolute会直接忽视掉父级div，就与上面（1）相同了，因为absolute只会相对父级是absolute和relative而定位。如果父级是absolute和relative，而没有设置父级的最小高度为100%的时候，footer就会在父级div的最下方，可能是最下面，也可能在中间，视父级的内容而定。

直接上源码：

<!Doctype>

<meta charset="utf-8">

<html>

<head>

<title>footer</title>

<style>

html,body {

margin: 0;

padding: 0;

}

#container {

min-height: 100%; //这里很重要

height: 100%; /*ie6不识别min-height*/

position: relative;

}

#content {

margin: 0 auto;

width: 100%;

}

#footer {

position: absolute;
bottom: 0;

width: 100%;

clear: both;

text-align: center;

}

</style>

</head>

<div id="container">

<div id="header">导航部分</div>

<div id="content" class="clearfix">页面内容部分</div>

<div id="footer">页脚部分</div>

</div>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css footer Web前端 html

相关文章推荐

新的分享

章节导航