網站頁腳不會堅持頁面的底部

我試圖讓頁腳堅持到我的網頁的底部，但它只浮動一半。我看了幾個例子，我不知道我做錯了什麼。任何援助將不勝感激。我的簡化代碼如下所示。網站頁腳不會堅持頁面的底部

<html> 
<head> 
</head> 

<body> 
    <div id = "wrapper"> 
     <!--Wrapper div for the main content--> 
    </div> 
     <!--Footer container--> 
    <div class="footer">  
    </div> 
</body> 

</html> 


--CSS-- 

body 
{ 
height: 100%; 
margin: 0; 
padding:0; 
background-color: #1A1F2B; 
min-width: 960px; 

} 

#wrapper{ 
min-height: 100%; 
} 

.footer{ 
position: relative; 
margin-top: -150px; /* negative value of footer height */ 
height: 150px; 
clear:both; 
display: block; 
background-color: #232A3B; 
}

來源

2012-09-18 user1224534

更改位置：相對;定位：固定;因爲它堅持到底部。 –

如果你希望它是在document的底部：

.footer { 
    position: absolute; 
    bottom: 0; 
}

如果你希望它是在視的底部：

.footer { 
    position: fixed; 
    bottom: 0; 
}

來源

2012-09-18 16:29:48 nickf

謝謝！它的完成：D – user1224534

如果你希望頁腳div位於頁面的底部，並跨越整個寬度，這將工作：

.footer { 
    position: absolute; 
    bottom:0; 
    height: 150px; 
    width: 100%; 
    background-color: #232A3B; 
}

HTML5還支持the <footer> Tag這可能使機器人更容易處理您的網頁上的信息。要改變它，只需使用footer {而不是.footer {並更改HTML標記。

來源

2012-09-18 17:13:57 greenyouse

網站頁腳不會堅持頁面的底部

回答

相關問題