HTML，CSS-粘性页脚在屏幕调整大小的内容上显示 [英] HTML, CSS - Sticky footer displays over content on screen resize

问题描述

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

Please refer to my site [removed]

我的页脚按预期显示在视口的末端.

My footer displays at the end of the viewport as intended.

垂直调整屏幕大小时，页脚将与屏幕上方的所有内容重叠.

When the screen is resized vertically the footer will overlap everything above it.

如何避免这种情况?

推荐答案

查看此粘性页脚教程.下面的代码应该是您所需要的.

Check out this sticky footer tutorial. The following code should be all you need.

* {
    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/

*/

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

Your negative value in your wrapper does not match the height of the footer. That is most likely part of your issue.

#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％.因此，主体将仅设置为其父(html)的100％，而不是浏览器的100％.您还必须将html的高度设置为100％才能正常工作.

You do not have the height set to 100% on the html and the body. Therefore, the body will only be set to 100% of its parent (html) which is not 100% of the browser. You must have the html's height set to 100% as well for it to work.

这篇关于HTML，CSS-粘性页脚在屏幕调整大小的内容上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！