使粘性页脚工作的问题答案

【问题标题】：Problems getting a sticky footer working使粘性页脚工作的问题
【发布时间】：2013-07-01 23:17:39
【问题描述】：

我目前正在处理一个网站，它需要一个粘性页脚，因为某些页面内容比其他页面小。

我尝试了许多资源/教程来尝试使粘性页脚正常工作。

我已尝试实施本教程，下面是我的代码。我希望有人

任何人都可以建议对我的代码进行 CSS 更改以实现此功能。

<body>
    <div id="wrapper">
        <div id="header-wrap">
            <div id="header"></div>
            <div id="home-header"></div>
            <div class="push"></div>
        </div>
        <div id="footer-wrap">
        </div>
    </div>
</body>

CSS

#footer-wrap
{
    background: url("images/footer.jpg") repeat-x scroll center bottom transparent;
    color: rgb(117, 139, 141);
    height: 462px;
    position: relative;
    width: 100%;
}
#header-wrap
{
    clear: both;
    min-height: 100%; 
    margin-bottom: -462px; 
}
#header-wrap:after
{
    content:"";
    display:block;
    height:462px;
}

不适合我。需要帮助！

'push' 也没有被使用。可以用吗？

编辑

body {
  height: 100%;
  margin:0px
}

html
{
height: 100%;
margin: 0px;
}

#wrapper
{
    min-height: auto !important;
    min-height: 100%;

}

【问题讨论】：

标签： css html footer sticky

【解决方案1】：

UPD

<style type="text/css">
    #footer-wrap
    {
        height: 462px;
        position: relative;
        width: 100%;
    }
    html, body {
      height: 100%;
      margin:0px;
      background: #eee;
        margin-bottom: -462px; 
    }

    #wrapper
    {
        min-height: auto !important;
        min-height: 100%;
        border: 1px solid red;
        margin-bottom: -462px;
    }
    #wrapper:after
    {
        content:"";
        display:block;
        height:462px;
    }
    </style>

HTML

<div id="wrapper">
    <div id="header-wrap">
    <div id="header"></div>
    <div id="home-header"></div>
    <div id="page-wrap"></div>
  </div>
</div>
<div id="footer-wrap">
</div>

【讨论】：

对不起，是的。我刚刚添加了。
那么我认为问题在于您的页脚位于包装器内部。

【解决方案2】：

你可以通过css技巧做到这一点

css

body, html{
    padding:0;
    margin:0;
    height:100%;
}

.wrapper{
    min-height:100%;
    position:relative;
}

.container{
    width:960px;
    margin:0 auto;
    padding-bottom:100px;
}

.header{
    height:100px;
    background-color:#066;
}

.footer{
    position:absolute;
    bottom:0;
    height:100px;
    background-color:#006;
    width:100%;
}

html

<div class="wrapper">
    <div class="container">

        <div class="header">
            Header
        </div>
        <div style=" text-align:center; padding-top:25px;">
         Place you content here as much as you like
        </div>

    </div>

    <div class="footer">
        Footer
    </div>
</div>

工作js Fiddle File

【讨论】：

【解决方案3】：

这行得通。

CSS

* {
  margin: 0;
}
html, body, #wrapper {
  height: 100%;
}
.header-wrap {
  min-height: 100%;
  margin-bottom: -462px; 
}
.header-wrap:after {
  content: "";
  display: block;
}
#footer-wrap, .header-wrap:after {
  height: 462px; 
}
#footer-wrap {
  background: orange;
}

HTML

<div id="wrapper">
    <div class="header-wrap">
        <div id="header">#header</div>
        <div id="home-header">#home-header</div>
    </div>

    <footer id="footer-wrap">
      #footer-wrap
    </footer>
</div>

【讨论】：