Question

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

我尝试过很多资源/教程试图让粘性页脚正常工作。

我试图实现本教程，下面是我的代码。我希望有人

是否有人可能会建议对我的代码进行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;
}

不适合我。需要帮助！

此外，“推送”未使用。使用它可能吗？

修改

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

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

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

}

Answer 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>

Answer 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

Answer 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>

粘性页脚工作的问题

3 个答案: