0

我遇到了一个问题，即粘性页脚似乎在其上方添加间距，我不确定是什么原因造成的，我尝试了几种不同的粘性页脚方法，但似乎都有同样的问题。标记一定有问题吗？

这是网站： 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>
4

2 回答 2

1

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

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

把它变成这样：

#main {
   overflow: auto;
}

我建议您学习如何使用调试工具，例如 chromes 开发人员工具或 firebug for firefox。当查看 HTML 并将鼠标悬停在元素上时，使用 chromes 开发工具很容易找到这一点。它突出显示元素本身蓝色，任何填充绿色和任何边缘橙色。我首先在您的页脚上突出显示，现在在蓝色突出显示上方看到绿色或橙色，表明问题不是您的页脚。所以我向上移动，我发现 ID 为 main 的 div 有一大块绿色，因为我将鼠标悬停在它上面，表示有大量的填充。单击该div后，我查看了CSS规则，看到了padding：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 */
于 2013-03-25T13:06:10.220 回答
1

你可能想看看这里！您将 margin top 设置为 -250 px，但您也将 margin 设置为 0 auto。这是一个矛盾，要么删除 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;}
于 2013-03-25T13:14:31.057 回答