我有这个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 */
对于我的网站,出于某种原因,页脚不会位于页面底部。
我尝试添加推送div
以使其向下移动到页面底部但由于某种原因无效。
任何想法我能做什么?我也创造了一个小提琴:http://jsfiddle.net/cGGMS/
答案 0 :(得分: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/
答案 1 :(得分:1)
答案 2 :(得分:0)
尝试在页脚上使用样式postition:fixed;
和bottom:0;
。
答案 3 :(得分:0)
你没有正确关闭包装div。它应该在页脚div之后关闭。这是工作代码http://jsfiddle.net/cGGMS/4/
<div id="footer">
<div id="footer-inner">
© Copyright <?php echo date("Y"); ?> All Rights Reserved.<br /><br />
</div>
</div>
</div> <!--wrap should end here not at the top of footer -->
答案 4 :(得分:0)
请评论此行并使用此功能。
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* margin: 0 auto -580px; */
}