CSS footer 页面底部

最新推荐文章于 2023-12-26 23:47:51 发布

kingrome2009

最新推荐文章于 2023-12-26 23:47:51 发布

阅读量292

点赞数

分类专栏： css3动画

本文链接：https://blog.csdn.net/kingrome2017/article/details/79537486

版权

css3动画专栏收录该内容

5 篇文章 0 订阅

订阅专栏

难题

在网页设计中，存在一个相当古老但又相当常见的问题，它是前端工程
师绕不开的坎。这个问题可以简单地概括如下：有一个具有块级样式的页脚
（比如它设置了背景或阴影），当页面内容足够长时它一切正常，而当页面较
短时（比如错误信息页面）就会出现问题

① 此时的问题在于，页脚不能像我
们期望中那样“紧贴”在视口的最底部，而是紧跟在内容的下方。
这个问题不仅普遍存在，而且乍看起来确实相当简单。因此，在所
有“隐蔽大坑”式的难题中，
② 它简直就是教科书般的典型案例。不仅如此，
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>

这里写图片描述

kingrome2009

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS footer 页面底部

难题在网页设计中，存在一个相当古老但又相当常见的问题，它是前端工程师绕不开的坎。这个问题可以简单地概括如下：有一个具有块级样式的页脚（比如它设置了背景或阴影），当页面内容足够长时它一切正常，而当页面较短时（比如错误信息页面）就会出现问题① 此时的问题在于，页脚不能像我们期望中那样“紧贴”在视口的最底部，而是紧跟在内容的下方。这个问题不仅普遍存在，而且乍看起来确实相当...
复制链接

扫一扫