html - 页脚上的内容

Question

所以我查看了所有关于此的帖子并尝试了所有方法...我的内容按我的意愿将页脚向下推。但是，有一小部分 div 覆盖了我的页脚。它可以在 http://www. newshongumpto.org 找到

它只是 div 的底部部分，我不明白为什么。我不得不将我的页脚 css 移动到实际的包含文件，因为它找不到媒体查询来隐藏移动设备上的页脚，但我离题了。我知道，这里发生了很多事情:

站点 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;
}

页脚 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&amp;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>

Answer 1

你有这个...

.info {
    text-align: center;
    top: 37px;
}

删除 37px，它将修复它。