HTML，CSS - 粘滞页脚在屏幕调整大小时显示在内容上答案

【问题标题】：HTML, CSS - Sticky footer displays over content on screen resizeHTML，CSS - 粘滞页脚在屏幕调整大小时显示在内容上
【发布时间】：2015-10-07 22:44:29
【问题描述】：

请参考我的网站[已删除]

我的页脚按预期显示在视口的末尾。

当屏幕垂直调整大小时，页脚将覆盖其上方的所有内容。

如何避免这种情况？

【问题讨论】：

标签： html css footer

【解决方案1】：

查看this sticky footer tutorial。下面的代码应该是你所需要的。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

编辑：

您的包装器中的负值与页脚的高度不匹配。这很可能是您的问题的一部分。

#wrapper {
    min-height: 100%;
    min-width: 450px;
    height: auto !important;
    height: 100%;
    /* your old code: margin: 0 auto -4em;*/
    margin: 0 auto -83px;
}

footer {    
    background: url('images/foot_bg.jpg') center no-repeat,
    url('images/foot_liq_bg.jpg') repeat;
    position:absolute;
    bottom:0;
    width:100%;
    height:83px;
    min-width: 450px;
}

编辑：

您没有将 html 和正文的高度设置为 100%。因此，body 将仅设置为其父 (html) 的 100%，而不是浏览器的 100%。您还必须将 html 的高度设置为 100% 才能正常工作。

【讨论】：

您好，我已经按照本教程进行了操作，但它不起作用？ vault-x.com/index_1.html
您只在身体上添加了 height: 100%。它也应该被添加到 html 中。如果这不是原因，您可能希望从一个空的 css 文件开始，只添加使粘性页脚工作所需的内容。然后从那里开始添加任何额外的 css 继续检查你是否没有破坏它。
jmein，请再看看我的网站。也许我已经做了一些事情来阻止这项工作？
Sean Zulu，是否有特定页面似乎无法正常工作？似乎没有什么不对的地方。

【解决方案2】：

它重叠是因为你给它绝对定位。您需要将其相对于您的其他内容进行定位。将您的主要内容设置为页面的 100% 高度，并将页脚放在下面。然后对页脚应用负边距，它的像素数量与其高度相同。

例如如果页脚是height:100px;，则使用margin-top:-100px;

来源：CSS Sticky Footer

【讨论】：

【解决方案3】：

别担心，肖恩。你离让它工作不远了。

您需要将body 元素上的padding-bottom 更改为margin-bottom，并取消footer 元素的绝对定位。此外，必须添加“push”div 才能使这种粘页脚方法发挥作用。

这个 jsFiddle 应该有帮助，它对我有用：http://jsfiddle.net/4vunq/

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vault-X</title>
<!--JS enabling IE <=8 to recognise HTML5 elements-->
    <script type="text/javascript">
    document.createElement ('header')
    document.createElement ('footer')
    </script>
    <script type="text/javascript" src="javascript.js"></script>
    <link href="style_01.css" title="one" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="switchoff">
        <div id="wrapper">
            <header></header>
            <div id="switch">
                <a href="#" onClick="lightSwitch();">
                    <img src="http://www.vault-x.com/images/switch.jpg">
                </a>
            </div>
            <div id="content"><p class="switch">Hello World</p></div>
            <div class='push'></div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

相关CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
footer, .push {
    height: 83px; /* .push must be the same height as "footer" */
}

这里是padding-bottom 而不是margin-bottom：

body {
    background:url('http://www.vault-x.com/images/body_bg.jpg') repeat-x;
    background-color: #000;
    margin-bottom:83px;
}

底部边距在这里也很重要：

#wrapper {
    min-height: 100%;
    min-width: 450px;
    height: auto !important;
    height: 100%;
    margin: 0 auto -83px; /* bottom margin is negative value of footer's height */
}

还有你的页脚代码：

footer {
background: url('http://www.vault-x.com/images/foot_bg.jpg') center no-repeat,
url('http://www.vault-x.com/images/foot_liq_bg.jpg') repeat;;
        width:100%;
        height:83px;
        min-width: 450px;
}

应该差不多了。漂亮的网站；还有祝你好运！ :)

【讨论】：

【解决方案4】：

我添加了 clear:both 解决了我的重叠问题。

#footer {
        position:relative;
        width:100%;
        height: 200px;
        background-color:#7B7168;
        margin-top: -200px;
        padding-bottom:50px;
        clear:both;
        }

【讨论】：