Sticky Footer 让页脚紧贴页面底部

一时失言乱红尘 2022-07-12 08:52 194阅读 0赞

**功能效果：当页面内容不超过当前屏幕高度时，页脚在屏幕的底部；当页面内容过多超过当前屏幕高度时，页脚在内容后面。**

**图片效果演示：**  
当页面内容不超过当前屏幕高度时：  
![当页面内容不超过当前屏幕高度时][SouthEast]

当页面内容过多超过当前屏幕高度时：  
![当页面内容过多超过当前屏幕高度时：][SouthEast 1]  
代码实现：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style> html,body,.text{ height:100%;} body,p,div{ margin:0;} .all{ height:auto; min-height: 100%;} .text{ padding-bottom: 50px;} .footer{ width:100%;height: 50px; background: red;text-align:center;margin-top:-50px;position:absolute;} </style>
    </head>
    <body>
    <div class="all">
        <div class="text">
            <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
            /* 可以通过增加文字内容测试效果*/
        </div>
        </div>
        <div class="footer">关闭</div>
    </body>
    </html>

*[怎么使用Sticky Footer代码][Sticky Footer]*

[SouthEast]: /images/20220710/5c03167c229c4f91bdf451f170812e80.png
[SouthEast 1]: /images/20220710/abcbf33d02fa4ff0afd0c397b17452da.png
[Sticky Footer]: https://aotu.io/notes/2017/04/13/Sticky-footer/

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关使用css弹性布局，让页面footer底部固定

在前端开发过的工作中，footer永远固定在底部的需求。也就是说一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内

电玩女神/ 2022年12月22日 04:37/ 0 赞/ 53 阅读

相关 Sticky Footer , fixed footer, pinned footer

1. through css > \footer \{ > > position:fixed; > > left:0px; > > botto

女爷i/ 2022年12月20日 01:50/ 0 赞/ 73 阅读

相关 html页脚紧贴页面底部,CSS：页脚紧贴底部

我的练习来源于《CSS揭秘》这本书第7章-41紧贴底部的页脚这部分内容以及书中提到的链接。方案一描述：以下方案简单、干净、现代并且没有hack，适用于IE8+, Chr

偏执的太偏执、/ 2022年10月06日 04:00/ 0 赞/ 159 阅读

相关 Sticky Footer 让页脚紧贴页面底部

功能效果：当页面内容不超过当前屏幕高度时，页脚在屏幕的底部；当页面内容过多超过当前屏幕高度时，页脚在内容后面。图片效果演示：当页面内容不超过当前屏幕高度时： ![

一时失言乱红尘/ 2022年07月12日 08:52/ 0 赞/ 195 阅读

相关 listview 设置页脚（footer）

有时候使用ListView显示一些数据时，希望在列表项的尾部增加一个页脚（注：不是放在屏幕的最低端），页脚会随着ListView的数量的增加而自动跟随，由于ListView在数

蔚落/ 2022年06月08日 07:30/ 0 赞/ 142 阅读

相关如何将页脚固定在页面底部

作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉

迈不过友情╰/ 2022年06月07日 14:21/ 0 赞/ 366 阅读

相关最完美的底部CSS布局: Sticky footers

html结构： <div class="container"> <div class="content-wrapper>

柔情只为你懂/ 2022年04月22日 23:24/ 0 赞/ 126 阅读

相关让web页面页脚footer固定在页面底部

有时候，我们发现很多页面内容不多的时候，页面底部内容飘到了中间： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

野性酷女/ 2022年03月29日 12:08/ 0 赞/ 279 阅读

相关 Sticky footer

Sticky footer布局是什么？我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部

àì夳堔傛蜴生んèń/ 2022年03月16日 06:48/ 0 赞/ 139 阅读

相关始终让footer在底部

1.footer保持在页面底部需求：我们希望footer能在窗口最底端，但是由于页面内容太少，无法将内容区域撑开，从而在 footer 下面会留下一大块空白第

灰太狼/ 2021年11月11日 08:20/ 0 赞/ 318 阅读