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 {
    background:url(../images/img/footer-bg-plus.png) center 50px no-repeat;
}

删除它，你应该没事。

Answer 2

来自.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;
}

Answer 3

请查看下面的截图，您提到140px为最小宽度，删除它。

https://snag.gy/8YrXCJ.jpg

Answer 4

如果这是你想要的

请将以下样式添加到.footer-item.wide

.footer-item.wide {
width: 100%;
min-height: auto !important;
box-sizing: border-box;
}

Answer 5

第一个。我.foooter-bottom的{{1}}是padding。从顶部将其更改为20px，例如。 0如果你想要20px到底部和左边。

第二个。在padding: 0 0 20px 20px; .footer-item更改填充中，例如。到padding。

最后一次。请在此处查看您的代码：

50px 0 0 20px;

如果要减少空白区域，则不需要<div class="footer-main-bottom clearer"> <div class="footer-item wide" style="min-height: 140px;">...属性。设置它，例如到min-height。您还可以删除其他90px中的无效padding和margin属性 - 只需在浏览器中使用任何代码检查器（例如Mozilla Firefox）。

这是我上述提示的效果。

如何删除页脚中的空格

5 个答案: