0

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

我的网站

我已经尝试了许多资源/教程，试图让粘性页脚工作。

跟随教程

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

任何人都可以建议对我的代码进行 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%;

}
4

3 回答 3

0

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>
于 2013-07-04T04:47:38.350 回答
0

这行得通。

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>
于 2013-07-04T06:01:20.397 回答
0

你可以通过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小提琴文件

于 2013-07-04T05:44:19.487 回答