如何在頁腳框之後創建「填充底部」？

我想簡單地把腳註放在我的html頁面的底部。我一直無法在網上找到一個體面的教程，主要是因爲我的內容雖然簡單，但並不標準（我想）。如何在頁腳框之後創建「填充底部」？

我有以下的HTML代碼（只是一個測試頁面，而不是真實的東西）：

<html> 

<head> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 

<div id = "container"> 


<div id = "header"> 
This is the header 
</div> 

<div id = "body"> 


<div class="IRL"> 
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div> 
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div> 
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div> 
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div> 
<div class="box"><a href= ""><img src="" width="100" height="100"></a></div> 
</div> 



<div id = "footer"> 
Testing footer 
</div> 

</div> 
</div> 
</html>

「style.css文件」的相關內容則是：

html, 

body { 
margin: 0; 
padding: 0; 
height: 100%; 
} 


#container { 
min-height:100%; 
position:relative; 
} 

#container { 
height:100%; 
} 

#body { 
padding:10px; 
padding-bottom:50px; /* Height of the footer */ 
} 

#footer { 
position:absolute; 
bottom:0; 
width:100%; 
height:50px; /* Height of the footer */ //This is from a tutorial 
} 

.IRL { 

position: absolute; top:50px; left:10px; 
} 


.IRL li{ 

margin:0px 150px 0px 0px; 
list-style-type:none; 

} 



.box { 
margin-top: 10px; 
padding: 5px 5px 5px 5px; 
border: 2px solid #000000; 
width:100px; 
height: 100px; 
color:#000000; 
}

問題即使當我把它放在底部時（經過一些修補），頁腳也會穿透盒子。基本上任何人都知道如何在盒子之後創造一個空隙？我曾認爲填充底部應該這樣做？

我希望我已經清楚

非常感謝提前。乾杯。

來源

2012-12-23 Hector

試用保證金底部： –

沒有什麼區別。 – Hector

移除所有絕對定位並添加：

.IRL { 
    margin-bottom: 50px; 
}

Demo

可替代地，調整絕對定位了各種元件top和bottom值。

來源

2012-12-23 13:50:34 bookcasey

非常感謝鏈接。一個方便的資源。我會爲它玩一下。乾杯 – Hector

任何想法的情況下，平行列框的情況下，我需要有一些定位例如剩100px？ – Hector

嘗試添加一個margin-top至#footer，該元素的高度由.box項目遞減。

來源

2012-12-23 13:46:46 CoursesWeb

如何在頁腳框之後創建「填充底部」？

回答

相關問題