我遇到了一个问题，即粘性页脚似乎在其上方增加了间距，我不确定是什么原因造成的，我尝试了几种不同的粘性页脚方法，但似乎都有相同的问题。 一定是标记有问题？
这是网站: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>
最佳答案
第 9 行 system.css 中的以下行导致了您的问题...
#main {
overflow: auto;
padding-bottom: 250px;
}
让它变成这样:
#main {
overflow: auto;
}
我建议您学习如何使用调试工具，例如 chrome 开发人员工具或适用于 firefox 的 firebug。当查看 HTML 并将鼠标悬停在元素上时，使用 chrome 开发工具很容易找到它。它以蓝色突出显示元素本身，任何填充绿色和任何边距橙色。我首先在您的页脚上突出显示，现在在蓝色突出显示上方看到绿色或橙色，表明不是您的页脚有问题。所以我向上移动，发现 ID 为 main 的 div 有一大块绿色，因为我将鼠标悬停在它上面，表明有大量填充。我点击那个div后查看了CSS规则，看到padding: 250px，然后取消选中它，你的问题就解决了。
编辑:
正如 NoLiver92 在下面发现的那样...您确定了 -250px margin-top 但随后您将其重置为 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;}
改为:
#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 */
关于css - 粘性页脚问题，页脚上方有空隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15615627/