Kann nicht herausfinden, wo große Leerraum Lücke kommt von

Question

In meiner Testseite, an der Unterseite, gibt es eine große weiße Lücke zwischen der Fußzeile und dem Körper, ich kann nicht herausfinden, warum.

Test page

HTML:

<div id="content">   
     <article> 
     <div class="social"> 


     <!--Widget code--> 

    <div id="fb-root"></div> 
    <script>(function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 

    <!--End Widget code--> 

    <!--FACEBOOK BUTTON 

    <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> --> 

    <!--End FACEBOOK BUTTON--> 
    <div class="sslbreadcrumbs"> 

    <!--first level--> 
    You are here: <a href="PageNavigator/Ontario/IFE_ON_CommunityPartnerships_splash.html">Cancer Fighters homepage</a>/Sweat 
    <!--second level--> 

    <!--third level--> 

    </div> 

    </div> 

     <div id="content-area"> 
     <!-- Content Placeholder --> 

    </div> 

    <div> 
      [[S63:3]] 

    <!--Button will only load on Homepage, this is NOT using Luminate Conditional code, see hmpgonly.js --> 
    <div class="button-container" id="hmpgonly"> <a href="http://convio.cancer.ca/site/TR/Events/General?pg=informational&fr_id=21959&type=fr_informational&sid=9700" class="butun register-butun">Start a Fundraiser</a> 




    </div> 



    </div> 
     <!-- //Content Placeholder --> 
     </div> 
     </div> 

    </article> 

    </div> 
    <!--================================================================ 
     FOOTER 
     ==============================================================--> 
    <footer> 

     <div id="footer-bottom"> 
      <div class="footer-cell-container"> 

<div id="footer-cell-one" class="footer-cell"> 


<h2>Be a Cancer Fighter</h2> 
<ul> 
[[S51:GEN_ON_Reus_CancerFighter_IFE_Footer]] 
<br> 
</ul> 

</div> 

<div id="footer-cell-two" class="footer-cell"> 
<h2>About the Program</h2> 
<ul> 
<li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10335">About the Program</a></li> 

<li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10336">About the Society</a></li> 

<li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10349">Where your money goes</a></li> 

<li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10340">FAQs</a></li 
</ul> 
</div> 


<div id="footer-cell-three" class="footer-cell"> 
<h2>Get Started</h2> 
<ul> 
<li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?fr_tm_opt=new&pg=tfind&fr_id=[[S334:fr_id]]">Create a fundraiser</a></li> 
<li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=existing">Join a fundraiser</a></li> 
<li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=none">Participate as an<br />individal</a></li> 
<li><a href="TR/UnitFundraisingEvent/General?pg=pfind&fr_id=[[S334:fr_id]]">Pledge a participant<br />or fundraiser</a></li> 
<li><a href="Donation2?df_id=[[S42:0:form-id]]&PROXY_ID=[[S334:fr_id]]&PROXY_TYPE=21&FR_ID=[[S334:fr_id]]">Donate now</a></li> 
</ul> 

</div> 


<div id="footer-cell-four" class="footer-cell"> 
<h2>Canadian Cancer Society</h2> 
<ul> 
<li><a title="What we do" href="http://www.cancer.ca/en/?region=on"target="_blank">What we do</a></li> 
<li><a title="Privacy policy" href="http://www.cancer.ca/en/about-our-site/privacy-policy/?region=on"target="_blank">Privacy policy</a></li> 
<br /> 
<br /> 
</ul> 
</div> 



<div id="footer-cell-five" class="footer-cell"> 
<br> 
<ul> 
<li>Copyright [[S9:pattern:yyyy]] Canadian Cancer Society </li> 
<li>Charitable Registration no. 118829803 RR00001</li> 

<br /> 
</ul> 
</div> 





      </div> 
     </div> 
    </footer> 

der CMS bedingte S-Tag Sie dort sehen werden [[S63: 3]] es den Körper von Text einfügt und so, dass Sie auf der Testseite sehen .

Die CSS für div id=content:

#content { 
    width: 100%; 
    max-width: 970px; 
    margin: 0 auto 122px auto; 
    overflow: auto; 
    overflow-y: hidden; 
} 

Wenn ich die Seite inspizieren es zeigt mir, dass der Inhalt 970 x 1802 ist, verstehe ich nicht, wo 1802 gezogen wird?

Jeder Vorschlag wird sehr geschätzt! Vielen Dank für Ihre Zeit.

Answer 1

1. Ihre Entwickler-Tools öffnen und betrachten .button-container
2. Entfernen Sie die min-height und margin-top Regeln und Sie werden sehen, dass der Raum verschwindet.

Zugegeben, jetzt ist Ihre Schaltfläche nicht richtig positioniert. Vielleicht möchten Sie das Layout Ihres Artikelkörpers überdenken, und wie Herr Lister erwähnte, legen Sie die Position des endgültigen Elements nicht als relativ fest, da es immer noch Platz beansprucht, obwohl es visuell an einem anderen Ort ist.

Answer 2

Zuerst hat Ihr div # content einen Margin-bottom gesetzt.

versuchen, mit diesem Code:

#content { 
    margin-bottom: 0 
} 

in zweiter Ich glaube, Sie einige Javascript haben, die einige div ändern. versuchen einige Skript in der Testseite zu deaktivieren (oder eine Arbeits Plunker bieten)

Answer 3

Veränderung der Marge auf #content zu -100px;

#content { 
    width: 100%; 
    max-width: 970px; 
    margin: 0 auto -100px auto; 
    overflow: auto; 
    overflow-y: hidden; 
}