想不通哪裏出現大的空白空白

在我的測試頁面底部，頁腳和身體之間有一個很大的白色空白，我找不出原因。想不通哪裏出現大的空白空白

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>

的CMS有條件s個標籤，你會看到有[S63：3]它插入文本的身體，這樣你在測試頁上看到。

爲div id=content的CSS：

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

當我檢查的頁面它顯示我的內容是970 X 1802，我不明白的地方1802正在從拉？

任何建議，非常感謝！感謝您的時間。

來源

2016-04-29 Umeed

我在這裏提供的代碼中沒有看到任何頁腳。請閱讀如何創建[mcve]。 –

抱歉，我沒有注意到頁腳沒有粘貼。更新 – Umeed

你真的應該這樣做，因爲一旦你修復了頁面本身的錯誤，這個問題就沒用了。無論如何，是的，＃內容div有一個122px的底部邊距，它的最後一個div是相對定位的，但這不會阻止它在#content div中佔用phuysical空間（即使沒有任何東西）。 –

打開你的開發工具，並期待在.button-container
刪除min-height和margin-top規則，你會看到空間消失。

當然，您的按鈕位置不正確。您可能想要重新思考文章主體的佈局，正如李斯特先生所提到的，不要將最終元素的位置設置爲相對的，因爲它仍然佔用空間，即使它在視覺上位於不同的位置。

來源

2016-04-29 17:32:07 chazsolo

啊，這是造成它的原因，奇怪的是我想通過移動它，它會從底部移除空間，因爲當我檢查它時，容器只會顯示按鈕的位置。我的問題現在雖然按鈕從我的手機視圖中刪除哈哈，但！現在我應該能夠解決這個問題，我知道問題出在哪裏。謝謝你！ – Umeed

起初您的div＃內容設定了保證金底部。

嘗試使用此代碼：

#content { 
    margin-bottom: 0 
}

在第二個我覺得你有一些JavaScript代碼調整一些股利。嘗試禁用在您的測試頁一些腳本（或提供工作plunker）

來源

2016-04-29 17:28:17 Zauker

變化#content的保證金-100px;

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

來源

2016-04-29 17:30:14

想不通哪裏出現大的空白空白

回答

相關問題