粘性頁腳問題，頁腳之間的差距

我有一個問題，其中粘性頁腳似乎在它上面添加間距，即時消息不知道是什麼原因導致此，我嘗試了幾個不同的粘性頁腳方法，並且都似乎有同樣的問題。它一定是錯誤的標記？粘性頁腳問題，頁腳之間的差距

這裏是網站：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

粘性頁腳問題，頁腳之間的差距

回答

相關問題