Css Sticky footer布局

最新推荐文章于 2023-02-13 20:45:00 发布

原创最新推荐文章于 2023-02-13 20:45:00 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了网页设计中常见的Sticky Footer实现方法。当页面内容不足时，页脚会固定在浏览器窗口底部；若内容过多，则页脚随内容下移。文章通过具体的HTML和CSS代码示例展示了如何创建这种效果。

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

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
html部分：

<!--使用这个布局的前提，就是close关闭按钮要在总的div容器之外，close关闭按钮使用一个层，其它所有内容使用一个总的层。-->
<div class="box-wrapper">
    <div class="main">
       内容
     </div>
 </div>
 <div class="close">
   <i class="icon-close">x</i>
 </div>

style部分


html, body {height: 100%;}

        .box-wrapper{
            min-height :100%/*容器的最小高为100%*/
        }

        .main{
             padding-bottom :64px;/*底部的距离+关闭按钮的大小的总高，这个很重要不能少*/
            }


        .close{
              position: relative;
              height :32px;/*关闭按钮的大小，根据实际的项目来*/
              width :32px;
              margin :-64px auto 0 auto;/*-64px要和padding-bottom 64px相等*/
              clear: both;

        }