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

最新推荐文章于 2024-07-11 17:12:47 发布

置顶 csdn_haow

最新推荐文章于 2024-07-11 17:12:47 发布

阅读量3.3k

点赞数 1

分类专栏： CSS3出现的相关问题文章标签： css footer Web前端 html

本文链接：https://blog.csdn.net/csdn_haow/article/details/56481258

版权

CSS3出现的相关问题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现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 {
  position: relative;
  min-height: 100%;  //这里很重要
  height: 100%; /*ie6不识别min-height*/
  padding-bottom: 100px;
  box-sizing: border-box;
}

#content {
  margin: 0 auto;
  width: 100%;
}

#footer {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  text-align: center;
}
</style>
</head>
<div id="container">
  <div id="header">导航部分</div>
  <div id="content" class="clearfix">页面内容部分</div>
  <div id="footer">页脚部分</div>
</div>
</html>

注意这里设置父级样式的时候指定了padding-bottom，就是为了给footer留下预留位置，这样就可以实现footer效果了。