Question

我正在创建一个网站，并在页脚上有一个包装器，我希望页脚是粘性页脚，但是当我最小化屏幕并使其变小时，页脚会超出内容和标题。

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

这就是我想要的，因为无论屏幕的大小如何，它都会使页脚移到页面底部。然而，当我最小化屏幕并将其向上移动时，它保持绝对，因此保持在那1页。

因为我希望它留在页面而不是页脚是绝对的。

任何想法。

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;
}

了解更多information。

希望页脚保持在底部，但不是绝对的

5 个答案: