难题
在网页设计中,存在一个相当古老但又相当常见的问题,它是前端工程
师绕不开的坎。这个问题可以简单地概括如下:有一个具有块级样式的页脚
(比如它设置了背景或阴影),当页面内容足够长时它一切正常,而当页面较
短时(比如错误信息页面)就会出现问题
① 此时的问题在于,页脚不能像我
们期望中那样“紧贴”在视口的最底部,而是紧跟在内容的下方。
这个问题不仅普遍存在,而且乍看起来确实相当简单。因此,在所
有“隐蔽大坑”式的难题中,
② 它简直就是教科书般的典型案例。不仅如此,
CSS 2.1 基本上拿它没有办法:几乎所有的经典解决方案都需要给页脚设置
固定的高度,而这显然是不健壮的,也是不实际的。此外,所有这些解决方
案都太过复杂、太像 hack 了,而且往往要求网页按照特定的结构来写。在
那个年代,受制于 CSS 2.1 有限的能力范围,这已是我们所能达到的最好结
果了。不过,在现代 CSS 的协助下,我们可以做得更好吗?如果答案是肯
定的,又该如何去做?
固定高度的解决方案
我们手头的这个页面极其简单, 元素内的结构代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
}
html,
body {
height: 100%; //很关键的一步
}
.wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -202px;//通过负边距隐藏replace
}
.footer,
.replace {
height:200px;//设置高度一致
}
.footer {
border: 1px solid #6AC5AC;
}
</style>
</head>
<body>
<div class="wrapper">
<p>博客地址: <a href="http://blog.csdn.net/kingrome2017">http://blog.csdn.net/kingrome2017</a> </p>
<div class="replace"></div>
</div>
<div class="footer">
愿你走过半生,归来任是少年。
http://www.kingrome.top
</div>
</body>
</html>