css Sticky footer的实现

最新推荐文章于 2025-05-08 19:12:41 发布

goose leaves a mark

最新推荐文章于 2025-05-08 19:12:41 发布

阅读量337

点赞数

分类专栏：前端文章标签： css Sticky footer

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种利用CSS实现的绝对底部布局技巧，确保在内容不足时，底部元素仍能固定在窗口底部，解决了普通布局下留白过多的问题。通过调整margin-top和设置min-height，即使窗口高度变化，也能避免内容重叠。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候制作网页的时候当内容太少的时候，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白）。

一：第一种方法：国外大神提供

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
             
            html,
            body,
            #wrap {
                box-sizing: border-box;
                height: 100%;
                border: 4px solid green;
            }
             
            body> #wrap {
                height: auto;
                min-height: 100%;
            }
             
            #main {
                padding-bottom: 150px;
            }
            /* 必须使用和footer相同的高度 */
             
            #footer {
                position: relative;
                margin-top: -150px;
                /* footer高度的负值 */
                height: 150px;
                clear: both;
                background: red;
            }
             
            .clearfix:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
             
            .clearfix {
                display: inline-block;
            }
            /* Hides from IE-mac \*/
             
            * html .clearfix {
                height: 1%;
            }
             
            .clearfix {
                display: block;
            }
            /* End hide from IE-mac */
        </style>
    </head>
 
    <body>
        <div id="wrap">
            <div id="main" class="clearfix">
                <div id="content">
                    CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。 先说我们为什么会使用到这个CSS底部布局解决方案: 当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。
                </div>
                <div id="side">
                    对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
                </div>
            </div>
        </div>
        <div id="footer">
            卧槽
        </div>
    </body>
 
</html>

html,body,#wrap设置height : 100%的目的是让这些很少的内容撑满整个屏幕，这样才能将footer置于底部，footer的margin-top:-64px的原因就是将footer往上顶就显示出来了，如果没有margin-top那么footer被顶到页面之下了（前提是wrap被设置成高度为100%）