希望页脚停留在底部，但不是绝对的

Question

我正在制作一个网站，并且在页脚上有包装纸，我希望页脚为粘性页脚，但是当我最小化屏幕并将其缩小时，页脚就会取代内容和页眉。

    #footerWrapper {
 height: 177px;
 bottom: 0;
 position: absolute;
 width: 100%;
 }

这可以满足我的要求，因为无论页面大小如何，页脚都可以移至页面底部。 但是，当我最小化屏幕并向上移动时，它保持绝对，因此停留在那一页。

正如我希望它停留在页面上，而不是页脚是绝对的。

有任何想法吗。

Answer 1

我正在使用它，并且在手机上也可以正常工作...

HTML：

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

CSS：

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px; /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

资源：

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

演示：

http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/

Answer 2

尝试这个

#footerWrapper{
    position: fixed;
}

#contentWrapper{
    margin-bottom: 177px; // height of the footer
}

Answer 3

通过使用z-index，我能够使页脚保持粘性，而不会超过页眉。 只需给较高的DIV较高的z索引。

    #headWrapper {
        padding-bottom: 0px;
        position: relative;
    }
    #headWrapper {
        z-index: 2;
    height: 160px;
        /* width: 960px; */
        margin: 0 auto;
        background: url(/images/PageImages/homeHeadBack.png) repeat-x;
    }

    #footerWrapper {
        background: url(/images/PageImages/footerBack.png) repeat-x;
        height: 177px;
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
    }

请注意，＃headWrapper需要指定position：relative。 我想你可能从这里开始。 在Chrome上工作。

Answer 4

好吧，我不是很积极，但是我想我知道你正在努力实现的目标

#footerWrapper {
   background: url(/images/PageImages/footerBack.png) repeat-x;
   height: 177px;
   position: fixed;
   width: 100%;
   bottom: 0px;
}

#contentWrapper {
   background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
   min-height: 208px;
   margin-bottom: 177px;
}

如果那不能解决问题，那么我不明白您的目标。

Answer 5

试试这个。

HTML：

<html>
<head>

    <link rel="stylesheet" href="layout.css" ... />

</head>

<body>

    <div class="wrapper">

        <p>Your website content here.</p>

        <div class="push"></div>

    </div>

    <div class="footer">

        <p>Copyright (c) 2014</p>

    </div>

</body>

</html>

CSS：

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

有关更多信息 。