杰晶网络

CSS Sticky Footer实现代码
网页制作 2025/11/1 佚名
3 2

本文介绍了CSS Sticky Footer实现代码，分享给大家，具体如下：

CSS Sticky Footer实现代码

上图所显示的效果就是sticky Footer，当页面主题内容不够长时，footer定位在窗口的底部，当页面主题内容超出窗口后，footer显示在页面的最底部

以下给出几种实现方案：

1. FlexBox布局

HTML结构如下：

<body>

    <div class="header">Sticky Footer</div>

    <div class="content">

        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

        <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

主要CSS如下：

body{

    display: flex;

    flex-flow: column;

    min-height: 100vh;

}

.content{

    flex: 1;

}

FlexBox实现就是这么简单，实现效果也贴上来

CSS Sticky Footer实现代码 CSS Sticky Footer实现代码 CSS Sticky Footer实现代码

贴图的效果好像不太好，但是效果是实现了的哦！！！！

2. 经典套路：padding-bottom + margin-top

HTML结构如下：

<body>

    <div class="wrapper clearfix">

        <div class="title">Sticky Footer</div>

        <div class="content">

            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

        </div>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

主要CSS如下：

.wrapper{

    min-height: 100vh;

}

.content{

    padding-bottom: 50px;

}

.footer{

    height: 50px;

    margin-top: -50px;

}

实现效果（感觉需要装个录屏软件了）：

CSS Sticky Footer实现代码 

CSS Sticky Footer实现代码 

CSS Sticky Footer实现代码

使用此方案时要注意以下几点：

1. wrapper的最小高度要等于窗口高度

2. content的padding-bottom、footer的margin-top和height这三个属性值的绝对值需保持一致（因为margin-top为负值，所以说绝对值）；保持一致的原因是更好的实现sticky footer，虽然height什么的偏小也能实现sticky footer效果，但是给最底部留下了空隙。

3. 这种方案的兼容性不错，各大主流浏览器均可，emmmmm，还不错

4. 当主体使用悬浮布局的时候，那么就需要考虑一个兼容性问题，这里使用的重点是为了Google chrome

上述第四条兼容性解决方案：

给.wrapper加上著名的clearfix hack：

.clearfix{

    display: inline-block

}

.clearfix:after{

    display: block

    content: "."

    height: 0

    line-height: 0

    clear: both

    visibility: hidden

}

3. 固定高度的解决方案

HTML结构如下：

<body>

    <div class="wrapper">

        <div class="header">Sticky Footer</div>

        <div class="content">

            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

            <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

        </div>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

主要CSS样式如下：

.wrapper{

    min-height: calc(100vh - 50px);

    box-sizing: border-box;

}

注：50px为footer的高度，calc()运算符前后都需要保留一个空格。

结果我就不贴了，大家自行脑补，跟上面的都差不多。。。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
CSS,Sticky,Footer
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“CSS Sticky Footer实现代码”
暂无“CSS Sticky Footer实现代码”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2025/11/1

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网