前端：页面内容不够，始终把footer固定在底部

红太狼 2022-05-21 09:52 226阅读 0赞

## 绝对定位 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页面内容不够，始终把footer固定在底部</title>
        <style> html, body { height:100%; min-height: 100%; position: relative; margin: 0; padding: 0; } header { background-color: #f00; } .main-content { background-color: #0f0; padding-bottom: 100px;/*padding-bottom要等于或大于footer的height值*/ } footer { position: absolute; bottom: 0; height: 100px; background-color: #00f; width:100%; } </style>
    </head>
    <body>
    <header>header</header>
    <div class="main-content">content</div>
    <footer>footer</footer>
    </body>
    </html>

## margin负值 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页面内容不够，始终把footer固定在底部</title>
        <style> html,body{ height:100%; margin:0; padding:0; } .top{ min-height:100%; } header{ background-color: #f00; } .main-content{ padding-bottom:100px;/*padding-bottom要等于或大于footer的height值*/ background-color: #0f0; } footer{ height:100px; margin-top: -100px; background-color: #00f; } </style>
    </head>
    <body>
    <div class="top">
        <header>header</header>
        <div class="main-content">content</div>
    </div>
    <footer>footer</footer>
    </body>
    </html>

注：以上两种方法要求footer高度固定。

发表评论取消回复

表情：

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

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

相关阅读

相关按钮固定在底部遮挡页面内容

参考链接：[https://www.cnblogs.com/china-fanny/p/11134316.html][https_www.cnblogs.com_china-f

Bertha 。/ 2023年03月13日 11:40/ 0 赞/ 21 阅读

相关 div中如何把图片始终悬浮（固定）在页面窗口底部或顶部

页面底部： css代码： .divClass { position: fixed; bottom: 0; left: 0; ri

阳光穿透心脏的1/2处/ 2022年12月19日 13:15/ 0 赞/ 181 阅读

相关 html 页面底部固定 footer

我们在编写html页面的时候总是希望footer 永远固定在最底部，最下面的footer 如果我们采用绝对定位当内容的告诉大于屏幕的高度的时候，我们发现底部这个时候就会一直保

刺骨的言语ヽ痛彻心扉/ 2022年10月24日 13:24/ 0 赞/ 151 阅读

相关 HTMl中内容离页面底部距离,CSS 实现内容高度不够的时候底部(footer)自动贴底

在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部(footer)就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是

迈不过友情╰/ 2022年10月06日 03:58/ 0 赞/ 8 阅读

相关把footer始终固定在页面底部

使用fixed属性可以实现，但是会使footer悬浮在页面底部还有其它的方法, 利用padding和margin属性 <!DOCTYPE html>

ゝ一纸荒年。/ 2022年08月30日 11:18/ 0 赞/ 214 阅读

相关前端：页面内容不够，始终把footer固定在底部

绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

红太狼/ 2022年05月21日 09:52/ 0 赞/ 227 阅读

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

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

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

相关通过flex布局时footer始终在页面底部

在页面布局时通常会遇到这样一个问题，页面内容太少时无法将内容区域撑开，从而使得footer下方有留白，使用flex布局可以很简单的解绝这一问题。 html代码如下：

男娘i/ 2021年12月17日 10:21/ 0 赞/ 462 阅读

相关始终让footer在底部

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

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

相关 HTML页脚始终固定在底部

页脚固定在底部分两种情况考虑，一种是有滑动栏的情况，一种是没有的。后者比较简单，直接加上定位属性就是了，但是在页面内容是扩充整个页面以至于可以下滑浏览时，这时候单纯加上定位属

电玩女神/ 2021年06月11日 15:12/ 0 赞/ 1561 阅读