Question

我在这里开发了一个网站：http://184.173.208.195/~secoast/about/mission但它应该有一个“粘性页脚”，但为了让投影在我必须修改的内容的底部正确显示代码稍微。这样，页脚就会出现在长页面内容的底部。

以下是粘性页脚的代码：

/* Begin Sticky Footer code */
html, body, #wrap       { height: 100%;}
body > #wrap            { height: auto; min-height: 100%; }
#main                   { padding-bottom: 50px; }  /* must be same height as footer 
*/
body.inside #main       { 
    height: 100%;
    margin-top: 5px;
    background: #fff url(../photos/bg_main.png) repeat-y;
    position: relative;
    -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.75);
    }

.white-bar-top  { 
    width: 959px; 
    height: 20px; 
    margin-left: 1px;
    background: #fff; 
    margin-top: -10px; 
}

.white-bar-bottom { 
    width: 959px; 
    height: 20px; 
    clear: both;
    background: #fff;
    position: absolute; 
    bottom: 0;  
    left: 1px;
    }   

#footer {
    position: relative;
    width: 100%;
    background-color: #dadfdb;
    margin-top: -50px; /* negative value of footer height */
    height: 50px;
    clear: both; 
}

这是html

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Meta Data -->
<meta charset="UTF-8">
<meta name="author" content="SE Coastal Wind Coalition">

<!-- Title -->
<title>Mission | About Us |SE Coastal Window Coalition</title>
<meta name='keywords' content='your, default, keywords, here' />
<meta name='description' content='Your default description here' />
<link rel='canonical' href='http://184.173.208.195/~secoast/about/mission' />
<!-- generated by seo_lite -->

<!-- Styles -->
<link rel="stylesheet" href="http://184.173.208.195/~secoast/css/styles.css?v=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://184.173.208.195/~secoast/fancybox/jquery.fancybox.css?v=2.0.6" media="screen" />


<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- <script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> -->
<script src="http://184.173.208.195/~secoast/js/jquery.dropmenu.js"></script>
<script>
$(document).ready(function(){
$("#nav-one").dropmenu({
openAnimation: "size",
closeAnimation: "slide",
openSpeed: 300,
closeSpeed: 200,
closeDelay: 500,
zindex: 1000
});
});
</script>       

<!-- Fancybox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>

<!-- page-specific scripts -->  
</head>

<body class="inside base-3-col">
<div id="wrap">

<div id="header">

<!-- navigation code goes here -->

</div><!-- end #header -->

<div id="main" class="clearfix">

<img class="banner" src="http://184.173.208.195/~secoast//photos/banner-inside.jpg" alt="banner-inside" width="962" height="125" />
<div id="page-title-banner">
<h2>About the Southeast Coastal Wind Coalition</h2>
</div>
<div class="white-bar-top"></div>
<div id="section-sub-nav"><!-- this only shows on base-3-col pages -->
<ul>
<li><a href="#">Nav One</a></li>
<li><a href="#">Nav Two</a></li>
<li><a href="#">Nav Three</a></li>
<li><a href="#">Nav Four</a></li>
</ul>
</div>

<div id="sidebar-nav" class="clearfix">
<ul>
<li><a class="selected" href="http://184.173.208.195/~secoast/about/mission">Mission</a></li>
<li><a  href="http://184.173.208.195/~secoast/about/members">Members</a></li>
<li><a  href="http://184.173.208.195/~secoast/about/management">Management</a></li>
<li><a  href="http://184.173.208.195/~secoast/about/board-of-directors">Board of Directors</a></li>
<li><a  href="http://184.173.208.195/~secoast/about/state-policy-liaison">State Policy Liaison</a></li>
</ul>
</div>

<div id="main-content">


<h3>Our Mission</h3>

<p>
<img alt="" src="http://184.173.208.195/~secoast/images/uploads/offshoregrande.jpg" style="width: 610px; height: 440px; " /><br />
<span style="font-size:9px;"><span style="font-family:trebuchet ms,helvetica,sans-serif;">PHOTO: COURTESY OF SIEMENS AG @2013. ALL RIGHTS RESERVED.</span></span></p>
<p>
Page text goes here.</p>

</div><!-- end #content-two-thirds-->
<div class="white-bar-bottom" class="white-bar"></div>
</div><!-- end #main -->
</div><!-- end #wrap -->


<div id="footer">
<div id="footer-content">
<ul id="footer-nav">
<li class="no-icon"><a href="#">Donate</a></li>
<li class="no-icon"><a href="#">Contact</a></li>
<li><a class="social facebook" href="#">Facebook</a></li>
<li><a class="social twitter" href="#">Twitter</a></li>
<li><a class="social linkedin" href="#">LinkedIn</a></li>
<li><a class="social youtube" href="#">Youtube</a></li>
<li class="no-icon">&copy;2012 Southeast Coastal Wind Coalition</li>    
<li class="no-icon"><a href="http://www.rouviere.com">Website by Rouviere Media</a></li>
</ul>
</div><!-- end #footer-content -->
</div><!-- end #footer -->
</body>
</html>

我很感激帮助让页脚保持在主要内容之下。

感谢。

Answer 1

在本地重新创建页面非常困难。您应该考虑创建一个独立的问题示例，以便其他人调试。

但是看看你的编码＆amp;您所陈述的问题似乎将#footer与margin-top: -50px;定位在一起导致问题。

#footer {
    position: relative;
    width: 100%;
    background-color: #dadfdb;
    margin-top: -50px; /* negative value of footer height */
    height: 50px;
    clear: both; 
}

您正在定位margin-top: -50px;以保持页脚停留，但它现在与主要内容重叠-50px，对吗？

所以也许解决办法就是在页脚之前提供50px的即时<div>或更多的补偿？

body.inside #wrap { 
    height: 100%;
    margin-bottom: 50px;
}

Answer 2

我建议你应该通过检测窗口高度来使用Javascript来执行 HARD STOP 这样的事情

var ht= window.innerHeight
if(ht< 760){
document.getElementById("footer").style = "width: 100%;background-color: #dadfdb;margin-top: -50px;height: 50px;clear: both;"
}else{
document.getElementById("footer").style = "width: 100%;background-color: #dadfdb;margin-top: -50px;height: 50px;clear: both;position:relative"
}

您可能还想查看Jquery的resize事件，查看相同的Here

offCourse Media-Queries也是另一种做法。请看一下here

为什么页脚会掩盖内容？

2 个答案: