html - 如何去掉页脚中的空格

Question

我对 HTML 和 CSS 还很陌生。我正在对 Magento 网站进行一些更改。遇到了一些麻烦... 这是网站。 website with problem

在页脚区域，有一个大的空白区域。我完全不知道为什么会有空白。我会尽力将所有相关代码放在这里。但基本上在页面源码中可以看到

<div class="footer-container<?php if($footerCssClasses) echo $footerCssClasses; ?>">
<div class="footer-container2">
  <div class="footer">


      <?php //Columns ---------------------------------------------------------------------------------- ?>
      <?php
      //Set minimum height of both footer columns ("footer-item")
      $linksColumnHeight = trim($themeHelper->getCfgDesign('footer/links_column_wrapper_height'));
      $colHeightStyle = ''; //CSS specifying main footer column height
      if (is_numeric($linksColumnHeight)) {
      $linksColumnHeight = (int) $linksColumnHeight;
      if ($linksColumnHeight > 0)
      //echo '<style>.footer-item { min-height:' . $linksColumnHeight . 'px; }</style>';
      $colHeightStyle = 'style="min-height:' . $linksColumnHeight . 'px;"';
    }
    ?>
    <?php
    //Get 5 static CMS blocks "i_block_footer_links_column<X>", where <X> is a number from 1 to 5
    $colCount = 0; //Number of existing column blocks
    $colHtml = array(); //Columns' content
    for ($i = 1; $i < 6; $i++)
    {
    if ($tmp_html = $this->getChildHtml('i_block_footer_links_column' . $i))
    {
    //$colHtml .= '<div class="footer-links-column-wrapper">' . $tmp_html . '</div>';
    $colHtml[] = $tmp_html;
    $colCount++;
  }
}
?>
<?php
//Check if company info block exists
$blockFooterCompanyHtml = $this->getChildHtml('i_block_footer_company');
?>
<?php //If columns or company info block exist ?>
<?php if ($colHtml || $blockFooterCompanyHtml != ''): ?>
  <div class="footer-main-bottom clearer">

    <?php //If any of the 5 blocks exist, display HTML output inside a wrapper block ?>
    <?php if ($colHtml): ?>
      <div class="footer-item wide" <?php if($colHeightStyle) echo $colHeightStyle; ?>>
        <?php
        //Set column styles, if automatic width calculation is enabled
        $colAuto = $themeHelper->getCfg('footer/links_column_auto_width');
        $colWidthStyle = ''; //CSS specifying single column width and margin
        $colWidthStyleLastCol = ''; //CSS specifying single column width and margin for the last column
        if ($colAuto && $colCount > 0)
        {
        //Calculate column and right margin width (percentage): 90% of space for column, 10% for margin
        //If there is only 1 column: width equals 100%, right margin is 0
        //IMPORTANT: Calculate margin only if there is more than 1 column (to avoid division by zero)
        if ($colCount > 1) {
        $colWidth = 90 / $colCount;
        $marginWidth = 10 / ($colCount - 1); //Subtract 1 because the last block has no right margin
      } else {
      $colWidth = 100;
      $marginWidth = 0;
    }
    $colWidthStyle = 'style="width:' .$colWidth. '%; margin-right:' .$marginWidth. '%;"';
    $colWidthStyleLastCol = 'style="width:' .$colWidth. '%; margin-right:0;"';
  }
  ?>
  <?php for ($i = 0; $i < $colCount; $i++): ?>
    <?php //If the last column: replace the width style with the width style for the last column
    if ($i+1 == $colCount)
    $colWidthStyle = $colWidthStyleLastCol;
    ?>
    <div class="footer-links-column-wrapper" <?php if($colWidthStyle) echo $colWidthStyle; ?>>
      <?php echo $colHtml[$i]; ?>
    </div>
  <?php endfor; ?>
  <script type="text/javascript">decorateGeneric($$('.footer-links-column-wrapper'), ['last'])</script>
</div>
<?php endif; ?>

这是页脚代码的一部分。 整段代码非常非常长...

这部分的 CSS:

.footer-container { 
  background:url(../images/img/footer-gray.png) center 0 repeat;
}

.footer-container2 {
  background:url(../images/img/footer-bg-top-line.png) center 0 repeat-x;
 }

.footer {
  width:960px;
  margin:0 auto;
  padding:0;
  text-align:left;
  background:url(../images/img/footer-bg-plus.png) center 50px no-repeat;
  color:#555; /* DESIGN: footer text color */
}

.footer a { 
  color:#555; /* DESIGN: footer link color */ 
}
.footer a:hover {
  color:#a60404; /* DESIGN: footer link color hover */ 
}
.footer .heading { 
  color:#333; 
 } /* DESIGN: footer heading color */

.mclear { clear:both; } /* my: additional simple clearing */ 

那么..有什么建议吗？ 我在想是不是因为背景图片太小了？但实际上是在重复。所以这个猜测是错误的。

Answer 1

空白来自 .footer-container2 类中的背景图像。只需将其删除即可。

.footer-container2 {
  background:url(../images/img/footer-bg-top-line.png) center 0 repeat-x;
}

还有来自您的 .footer 类的阴影图像。也删除它。

.footer {
    background: url("../images/img/footer-bg-plus.png") no-repeat  center 50px;
}