css实现footer底部自粘

最新推荐文章于 2024-07-24 16:53:23 发布

Is_zhangzhangzhang

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量918

点赞数

分类专栏： css小结文章标签：界面浏览器 html css

本文链接：https://blog.csdn.net/Is_zhangzhangzhang/article/details/75670583

版权

写界面时几乎每一个界面都会有顶部、中间内容、底部三个部分。
在写底部时，我们总是需要底部总是在最底下的部分。我常常会出现这样的情况：

把一个个盒子按顺序写下去并所写的界面的顶部还有内容部分已经占满了整个页面，所以会很自然的把footer的盒子直接放在前面的盒子后面。

当前面内容的盒子足够大，足以撑开元素到浏览器底部时，紧跟在后面的footer盒子也会排在其后不用做任何处理就实现了footer在底部的操作。如下图左所示
当前面内容盒子不足以撑起到浏览器底部，如下图右所示，footer的下面大量留白。也就不能起到保持在最底部的作用了。

解决方法

在通过百度后，普遍找到了在css中加入position:absolute; bottom:0;的方法。在测试后发现这个方法在页面有留白的时候是非常好用的。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

          *{
            margin: 0;
            padding: 0;
          }

         .header{
            background: yellow;
            width: 100%;
            height: 100px;
         }

         .content{
            background:orange;
            width:100%;
            height:800px;
         }

         .footer{
            background:gold;
            width:100%;
            height:100px;
            position: absolute;
            bottom: 0;
         }
    </style>

</head>


<body>
       <div class="header">
            <h1>

最低0.47元/天解锁文章

Is_zhangzhangzhang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现footer底部自粘

写界面时几乎每一个界面都会有顶部、中间内容、底部三个部分。在写底部时，我们总是需要底部总是在最底下的部分。我常常会出现这样的情况：把一个个盒子按顺序写下去并所写的界面的顶部还有内容部分已经占满了整个页面，所以会很自然的把footer的盒子直接放在前面的盒子后面。当前面内容的盒子足够大，足以撑开元素到浏览器底部时，紧跟在后面的footer盒子也会排在其后不用做任何处理就实现了fo
复制链接

扫一扫