0

我有这个 CSS：

body,html {
    width:100%;
    height:100%;
    font-family:Calibri;
    position: relative;
    margin:0;
    padding:0;
}

#wrap {
    min-height: 100%;
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -580px; /* the bottom margin is the negative value of the footer's height */
}

.push {
    height: 100px; /* .push must be the same height as .footer */
}

/* header stuff */
#header-topbar {
    width:100%;
    height:30px;
    padding:10px 10px 10px 10px;
    background-color:#a79494;
}
#phone-tel {
    position:block;
    float:right;
    margin-right:16%;
    margin-top:5px;
    font-size:20px;
}
#logo {
    position:absolute;
    float:left;
    margin-left:15%;
    margin-top:-20px;
}

/* main body/content */
#body-content {
    width:70%;
    margin:120px auto 0 auto;
    padding:10px 10px 10px 10px;
    border:solid 1px #a79494;
    border-top:solid 4px #a2cd3a;
}

/*footer */

对于我的网站，由于某种原因，页脚不会位于页面底部。

我尝试添加 Pushdiv以使其向下移动到页面底部，但由于某种原因这不起作用。

有什么想法我能做什么？我也创建了一个小提琴：http: //jsfiddle.net/cGGMS/

4

5 回答 5

1

#wrap的边距必须是0 auto -100px

http://jsfiddle.net/cGGMS/3/

"底部边距是页脚高度的负值"
你的页脚高度是 100px

于 2013-04-17T08:54:37.813 回答
1

删除这样的负边距#wrap：

#wrap {
    min-height: 100%;
    height: auto !important; 
    height: 100%; 
    margin: 0 auto; /* the bottom margin is the negative value of the footer's height */
}

JSFiddle：http: //jsfiddle.net/cGGMS/2/

于 2013-04-17T08:53:13.453 回答
0

请评论这一行并使用它。

#wrap {
min-height: 100%;
height: auto !important; 
height: 100%; 
/* margin: 0 auto -580px; */

}

于 2013-04-17T08:57:39.887 回答
0

您没有正确关闭 wrap div。它应该在页脚 div 之后关闭。这是工作代码http://jsfiddle.net/cGGMS/4/

   <div id="footer">
    <div id="footer-inner">
          &copy; Copyright <?php echo date("Y"); ?> All Rights Reserved.<br /><br />
     </div>
  </div>
  </div> <!--wrap should end here not at the top of footer -->
于 2013-04-17T08:55:46.163 回答
0

尝试使用样式postition:fixed;和bottom:0;页脚。

于 2013-04-17T08:52:40.130 回答