Question

我有一个问题，粘性页脚似乎在它上面添加间距，我不知道是什么导致这个，我尝试了一些不同的粘性页脚方法，所有似乎都有相同的问题。标记一定有问题吗？

这是网站：http://www.adamtoms.co.uk/

感谢任何帮助！

亲切的问候，亚当

    <?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head> 
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mk1/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mk1/css/general.css" type="text/css" />
</head>
<div id="wrap">

    <div id="main">




<div id="container">
<body>

<div id="header" >

  <div id="headleft">
   <jdoc:include type="modules" name="logo" />
  </div>

  <div id="headright">
   <div id="navr">
    <div id="nav">
     <jdoc:include type="modules" name="menu" />
    </div>
   </div>
  </div>
</div>

<div id="breadcrumb">
    <jdoc:include type="module" name="breadcrumb" />
</div><br />



<div id="content">
<jdoc:include type="component" name="content" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="slider" />
</div>


<div id="leftrightmain">
<div id="midleft">
<jdoc:include type="modules" name="left" />
</div>
<div id="midright">
<jdoc:include type="modules" name="right" /></div>
</div>


</body>
</div>


</div>
</div>


<footer>
<div id="footer"><jdoc:include type="modules" name="footer" />
    <jdoc:include type="module" name="debug" />


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

Answer 1

第9行的system.css中的以下行导致了您的问题...

#main {
   overflow: auto;
   padding-bottom: 250px;
}

实现目标：

#main {
   overflow: auto;
}

我建议您研究如何使用调试工具，如chromes开发人员工具或firebug for firefox。在查看HTML并将鼠标悬停在元素上时，使用chromes开发工具很容易找到它。它突出了元素本身的蓝色，任何填充绿色和任何边缘橙色。我先在你的页脚上突出显示，然后在蓝色突出显示的上方看到绿色或橙色，表示不是你的页脚出现了问题。所以我向上移动，我发现ID为主的div有一大块绿色，因为我在它上面盘旋，表明有大量的填充物。点击该div后我查看了CSS规则，看到填充：250px，并取消选中它，问题就解决了。

修改

正如NoLiver92在下面找到的......你确定了一个-250px的保证金 - 然后你用保证金0自动重置它...

#footer { position: relative; background-image:url('../images/bg_footer1.png'); margin-top: -250px; /* negative value of footer height */ height: 250px; clear:both; width: auto; margin: 0 auto;}

改为：

#footer { position: relative; background-image:url('../images/bg_footer1.png'); height: 250px; clear:both; width: auto; margin: -250px auto 0 auto;}/* negative value of footer height */

Answer 2

你可能想看看这里！您将保证金最高值设为-250像素，但您也将保证金设置为0自动。这是一个矛盾，要么删除margin-top，要么删除margin，并用margin-left，margin-right和margin-bottom替换它。

#footer {
position: relative;
background-image:url('../images/bg_footer1.png');
margin-top: -250px; /* negative value of footer height */
height: 250px;
clear:both;
width: auto;
margin: 0 auto;}

粘性页脚问题，页脚间隙

2 个答案: