技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> CSS中变化Fixed的实现

CSS中变化Fixed的实现

浏览:1012次  出处信息

有时候，一些看起来很简单的事情在CSS中就特别让人恼火。将页脚固定在页面的底部，但是当页面内容比较长的时候页脚就不固定在屏幕底部而是在内容底部，听起来很简单了，但是用CSS实现起来不是那么轻松了。

下面这个教程就来讨论一下如何实现这样的效果。

首先，这里是一个例子，可以看看。

HTML代码

这部分的代码，跟我们之前的100%高度布局的文章中一样。

额外添加的东西就是一个清除浮动的div和footer的div。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>CSS Fixed Footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<h1>CSS Fixed Footer</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
<p>Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra.</p>
<p>Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue.</p>
<div id="clearfooter"></div>
</div>
<div id="footer">
<p>&copy; Dave Woods</p>
</div>
</body>
</html>

CSS代码

跟之前一样，首先是一些通用的代码，如果你不太清楚这些代码做什么的，可以参看以前的文章。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

* {
padding: 0;
margin: 0;
}
body {
font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
h1 {
font-size: 1.4em;
padding: 10px 10px 0;
}
p {
padding: 0 10px 1em;
}
html, body {
height: 100%;
}
#container {
min-height: 100%;
background-color: #DDD;
border-left: 2px solid #666;
border-right: 2px solid #666;
width: 676px;
margin: 0 auto;
}
* html #container {
height: 100%;
}

然后把footer放在应该放置的地方，代码如下：

1
2
3
4
5
6
7
8
9

#footer {
width: 680px;
background-color: #000;
color: #DDD;
text-align: center;
height: 40px;
padding-top: 10px;
margin: -50px auto 0 auto;
}

这些都比较简单了。width,background-color,color,height,padding-top这些都是用来控制footer的样式的，margin的使用在这里要注意一下。

如果没有设置margin，那么footer就会一直现在在content之后，而且会有50px的滚动，因为是100%高度布局的。然而，我们知道footer的高度，所以我们就可以使用-margin把footer推回到内容里面去，设置的margin的负值就跟footer的高度一样。

也可以就此打住，但是你会发现如果浏览器的窗口减到一个比较小的值的时候，内容会在footer下面了。

我们可以用下面的办法来修正这个错误，可以保证永远有地方放置footer。

1
2
3

#clearfooter {
height: 50px;
}

我们可以给已知元素设置padding或者margin，但是最方便的办法还是使用一个单独的div，直接就搞定了。

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：CSS利用背景图做等高列
后一篇：重置还是不重置-这是个CSS问题 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1