粘性页脚问题，页脚之间的差距

我有一个问题，其中粘性页脚似乎在它上面添加间距，即时消息不知道是什么原因导致此，我尝试了几个不同的粘性页脚方法，并且都似乎有同样的问题。它一定是错误的标记？粘性页脚问题，页脚之间的差距

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

来源

2013-03-25 atoms

如果您需要任何帮助，某些代码可能会有帮助 – NoLiver92 2013-03-25 13:04:03

它不是页脚，它是＃main-div。删除'padding-bottom：250px;' - 您可以使用FireBug（用于FireFox）或Chrome开发人员工具来处理这些问题。 – Quasdunk 2013-03-25 13:05:29

谢谢我一直使用萤火虫扩展试图解决这个问题，我不能看到是什么造成它。 – atoms 2013-03-25 13:11:22

在system.css以下行线9导致您的问题...

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

让它这样：

#main { 
    overflow: auto; 
}

我建议你看看如何使用调试工具，如chromes开发人员工具或fireb ug 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-25 13:06:10 Michael

谢谢我已经更新了建议的CSS，但问题仍然存在:( – atoms 2013-03-25 13:10:01

不，它现在正在工作，它只是因为没有足够的内容而无法正常工作。将几段假文本插入你的身体在任何地方，以强制你的网页有更高的高度，或者只是重新调整浏览器窗口的大小，使其成为非常小的高度，这样你就可以滚动，然后你就会发现它工作正常。 – Michael 2013-03-25 13:12:19

谢谢大家真的很有帮助！看到它现在似乎工作，但是你必须向下滚动页面才能查看页脚？为什么这是在那里滚动？我会认为没有任何内容页脚会出现在页面上，而不需要向下滚动？编辑：我已经改变了代码作为sugested，它的工作！谢谢!!有没有办法删除页脚周边边缘？ – atoms 2013-03-25 14:02:08

你可能想看看这里！您将margin设置为-250 px，但您也将margin设置为0 auto。这是一个矛盾，要么删除保证金顶部或删除保证金并将其替换为保证金左侧，保证金右侧和保证金底部。

#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-25 13:14:31 NoLiver92

这是你问题的另一半。尼斯发现@ NoLiver92。它应该是margin：-250px auto 0 auto;并删除边距 – Michael 2013-03-25 13:18:12

粘性页脚问题，页脚之间的差距

回答

相关问题