所以我查看了所有与此相关的文章，并尝试了所有方法...我的内容正在按我的意愿压低页脚。但是，div的一小部分覆盖了我的页脚。可以在http://www. newshongumpto.org
找到它只是div的底部，我不知道为什么。我不得不将页脚css移动到实际的include文件，因为找不到媒体查询来隐藏移动页脚，但是我离题了。我知道，这里发生了很多事情：
站点CSS：
@charset "UTF-8";
.navbar-nav> li > a {
font-family: 'Arial';
font-weight: bold;
color: #000000;
font-size: 15px;
}
.dropdown-menu > li > a {
font-family: 'Arial';
font-weight: bold;
color: #000000;
font-size: 15px;
}
.navbar-default {
border-color: #000000;
}
.nav.navbar-nav a:hover {
color: #206E38;
}
.dropdown-menu .dropdown .dropdown-toggle a {
font-family: 'Arial';
font-weight: bold;
font-size: 15px;
}
.banner {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,206e38+100&1+0,0.52+43,1+100 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(159,193,169,0.52) 43%, rgba(32,110,56,1) 100%); /* FF3.6-15 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#206e38',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.ptobigtitle {
font-family:'Anton', sans-serif;
padding: 10px;
}
.ptosubtitle {
font-family: 'Anton', sans-serif !important;
padding-left: 10px;
font-size: 30px;
color: #535252;
}
.navbar-btn {
float: right;
}
.btn-default {
background-color: #206E38;
color:#FFF;
}
.jumbotronimg {
float: right;
}
.learnmorebtn {
margin-left: 200px;
}
.articleheadline{
font-family: 'Anton', sans-serif;
font-size: 20px;
background: #A1C2AB;
color: #000;
letter-spacing: 2px;
padding: 5px;
max-width: 400px;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
border-style: solid;
border-width: 1px;
}
.info{
text-align: center;
top: 37px;
}
.rightinfo{
text-align: center;
}
.footer {
display:block;
background:#CDCDCD;
overflow:hidden;
margin-bottom: 0;
postion: fixed !important;
height: auto;
bottom: 0 !important;
width: 100%;
clear: both;
}
.bottomfooter {
color:#FFF;
font-family: 'Arial';
font-size: 10px;
background: #CDCDCD;
bottom: 0;
}
.footerheading {
font-family: 'Anton', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: underline;
}
.form-inline{
background: #CDCDCD;
}
#mc_embed_signup #mce-EMAIL{
font-family: "Arial";
font-size: 13px;
padding: 5px;
padding-top: 2px;
margin-left:auto;
margin-right:auto;
}
.callistcontainer {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 300px;
overflow: scroll;
}
.footertext{
font-size: 11px;
table-layout: fixed;
width: 100%;
height: auto;
text-align: center;
margin-left: auto;
margin-right:auto;
}
.footerposition{
font-weight: bold;
text-align: right;
padding-right: 10px;
border-right: solid;
border-width: 1px
}
.footername{
border-width: 1px;
text-align: center;
}
.footerphone{
border-width: 1px;
text-align: center
}
.footeremail {
padding-left: 10px;
border-width: 1px;
text-align: center
}
.vl {
border-right: solid;
border-width:1px;
border-color: #000000;
}
.footernavigation {
text-align: center;
color: #000000;
font-size: 11px;
margin-left:auto;
margin-right: auto;
border: none;
border-collapse: separate;
border-spacing: 20px 0
}
.footernavheader{
text-align: center;
text-decoration: underline;
font-size: 11px
}
.copywrite{
font-family: "Arial";
font-size:11px;
text-align: center;
font-weight:bold;
padding-top: 25px;
}
#mc-embedded-subscribe{
-webkit-appearance: none;
margin-left:285px
}
.paypal_btn{
display: inline-block;
font-family: "Gotham", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
font-size: 14px;
font-weight: 500;
color: #000000;
text-align: center;
padding: 5px 10px;
margin-top: 10px;
margin-left: 30px;
background: #FFD700;
border: solid;
border-width:thin;
border-color: #C5C5C5;
cursor: pointer;
outline: none;
border-radius: 3px;
}
.paypal_btn:hover{ background:#e7e7e7;
}
.shongumTitle{
font-family: 'Anton', sans-serif !important;
font-size: 20px;
color: #767373;
padding-right:5px
}
.store{
margin-top:60px;
}
Footer CSS
<style>
.footer {
display: none;
}
@media (min-width: 767px) {
.footer {
display:block;
background:#CDCDCD;
overflow:hidden;
margin-bottom: 0;
postion: fixed;
height: auto;
bottom: 0;
width: 100%;
clear: both;
</style>
HTML
<?php include("includes/navigation.php");?>
<div class="jumbotron banner">
<img src="images/ShongumSkyhawkBird_bg.png" alt="Shongum Elemtary School - Skyhawks" width="252" height="321" class="jumbotronimg img-responsive"/>
<h1 class="ptobigtitle">Shongum Elementary School</h1>
<h2 class="ptosubtitle">Parent Teacher Organization - A Quest for Excellence</h2>
<a class="btn btn-primarybtn-lg btn-default learnmorebtn" href="contentPages/about.php">Learn more »</a>
</div>
<div class="col-lg-4 info">
<h2 class="articleheadline"><img src="images/003-calendar.png" width="32" height="32" alt=""/> UPCOMING EVENTS</h2><br>
<div class="callistcontainer">
<link href="http://www.newshongumpto.org/calendarScript/core/framework/libs/pj/css/pj.bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="http://www.newshongumpto.org/calendarScript/index.php?controller=pjFront&action=pjActionLoadCss&theme=5" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.newshongumpto.org/calendarScript/index.php?controller=pjFront&action=pjActionLoad&theme=5&view=list&icons=T&cats=T"></script>
</div>
</div>
<div class="col-lg-4 info">
<h2 class="articleheadline">
<img src="images/001-news.png" width="32" height="32" alt=""/> LATEST NEWS</h3>
<p><style type="text/css">
<!--
.display_archive {font-family: arial,verdana; font-size: 12px;}
.campaign {line-height: 125%; margin: 5px;}
//-->
</style>
<script language="javascript" src="//ShongumPTO.us14.list-manage.com/generate-js/?u=94f392b8b8898807cb75b5931&fid=6999&show=5" type="text/javascript"></script></p>
<p> </p>
</div>
<div class="col-lg-4 rightinfo">
<h2 class="articleheadline">
<img src="images/002-group.png" width="32" height="32" alt=""/> GET INVOLVED!</h3>
</div>
</div>
<br>
<?php include("includes/footer.php");?>
</body>
</html>
脚
<body id="footer" is="dmx-app">
<dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/homePage/officerInfo.php"></dmx-serverconnect>
<div class="footer">
<div class="container-fluid">
<div class="col-lg-4">
<h2 class="footerheading"> Officers</h2>
<div class="footertext" dmx-repeat:repeat1="serverconnect1.data.ptoOfficers">
<table width="549" height="46" class="footertext">
<tbody>
<tr>
<td class="footerposition">{{col_position}}</td>
<td class="footername">{{col_firsrtName}} {{col_lastName}}</td>
<td class="footerphone">{{col_phone}}</td>
<td> <a href="mailto:{{col_email}}" class="footeremail">{{col_email}}</a> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-4">
<h2 class="footerheading">Navigate</h2>
<table class="footernavigation">
<tbody>
<tr>
<p class="footernavheader"><strong>PTO</strong></p>
</tr>
<tr>
<td><a href="../contentPages/about.php">About Us</a></td>
<td><a href="../contentPages/membership/membership.php">Membership</a></td>
</tr>
<tr>
<td><a href="../contentPages/programs/programs.php">Programs</a></td>
<td><a href="../contentPages/classes/classes.php">Classes</a></td>
</tr>
<tr>
<td><a href="../contentPages/store.php">Store</a></td>
<td><a href="http://maschiofood.com/shongum-elementary-school/">Lunch Menu</a></td>
</tr>
<tr>
<td><a href="../contentPages/newsCalendar/news.php">News</td>
<td><a href="../contentPages/newsCalendar/calendar.php">Calendar</td>
</tr>
</tbody>
</table>
<br>
<table class="footernavigation">
<tbody>
<tr>
<p class="footernavheader"><strong>Randolph School District</strong></p>
</tr>
<tr>
<td><a href="https://www.rtnj.org/Page/2444">RAM Alerts</a></td></td>
<td><a href="https://www.rtnj.org/domain/162">District Calendar</a></td></td>
</tr>
</tbody>
</table>
</tbody>
</table>
</div>
<div class="col-lg-4">
<h2 class="footerheading">Stay in Contact!</h2>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#CDCDCD; clear:left; font:10px "Arial",sans-serif; width:500px;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://ShongumPTO.us14.list-manage.com/subscribe/post?u=94f392b8b8898807cb75b5931&id=07d0e3a6fb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Newsletter Signup" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_94f392b8b8898807cb75b5931_07d0e3a6fb" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
<br>
<br>
<div class="col-lg-12 copywrite"> © <?php echo date("Y"); ?> Shongum Elementary School Parent Teacher Organization
</div>
</div>
<script type="text/javascript">
/* dmxServerAction name "ptoOfficersExecutor" */
jQuery.dmxServerAction(
{"id": "ptoOfficersExecutor", "url": "../dmxConnect/api/homePage/officerInfo.php", "method": "GET", "sendOnSubmit": false, "sendOnReady": true, "data": {}}
);
/* END dmxServerAction name "ptoOfficersExecutor" */
</script>
</body>
</html>
答案 0 :(得分：1)
你有这个...
.info {
text-align: center;
top: 37px;
}
删除37px，它将修复它。