Question

在我的测试页面底部，页脚和身体之间有一个很大的白色间隙，我无法弄清楚原因。

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是从哪里拉出来的？

非常感谢任何建议！谢谢你的时间。

Answer 1

首先你的div #content设置了一个margin-bottom。

尝试使用此代码：

#content {
  margin-bottom: 0
}

第二，我认为你有一些调整大小div的javascript。尝试在测试页面中禁用某些脚本（或提供有效的插件）

Answer 2

将#content上的边距更改为-100px;

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

Answer 3

打开您的开发工具，然后查看min-height
删除margin-top和>>> mylist = [14,35,37,39,42] >>> sum(v for i, v in enumerate(mylist) ... if (i > 0 and v - mylist[i-1] <= 3) or ... (i < len(mylist) - 1 and mylist[i+1]-v <= 3)) 153规则，您会看到该空格消失。

当然，现在您的按钮位置不正确。您可能想重新考虑文章正文的布局，正如李斯特先生所提到的，不要将最终元素的位置设置为相对元素，因为它仍然占用空间，即使它在视觉上是在一个单独的位置。

无法弄清楚大的空白区间来自哪里

3 个答案: