在div元素內創建完全適合的頁眉和頁腳元素

Question

我試圖在CSS中創建頁眉和頁腳。 以下是我的代碼：

HTML

<div id="container"> 
    <div id="header">Kaboom!</div> 
    <div id="footer">Kaboom!</div> 
</div> 

CSS

#header{ 

    background-color:orange; 
    width:500px; 
    height:20px; 
    border:3px solid blue; 
    border-left-style:none; 
    border-right-style:none; 
    list-style-type:none; 
    border-top-style:none; 
    text-align:center; 
} 
#footer{ 
    margin-top:455px; 
    background-color:pink; 
    width:500px; 
    height:20px; 
    border:3px solid blue; 
    border-left-style:none; 
    border-right-style:none; 
    list-style-type:none; 
    border-bottom-style:none; 
    text-align:center; 
} 
#container 
{ 
    margin:auto; 
    background-color:#addadd; 
    width:500px; 
    height:500px; 
    border:5px solid blue; 
    border-radius:5px; 
} 

jsfiddle

雖然我的代碼工作是頭安裝在頂部罰款，頁腳在底部。但我必須做很多事情手動例如我不得不從內部元素刪除邊界，同樣我必須通過構建和嘗試方法設置邊距。我的問題是，這裏有一些數學，如果容器的高度和寬度是500px，然後修復裏面的元素，他們應該有相對於容器的一些正負像素。類似地，應該放置頁眉的頁邊距以及相對於容器的頁邊距放置什麼邊距，還是有其他一些有效的方法？

Answer 1

這個怎麼樣， 位置：相對於#container，然後位置：絕對的頁腳和標題。

#container { 
    position: absolute; 
    margin:auto; 
    background-color:#addadd; 
    width:500px; 
    height:500px; 
    border:2px solid blue; 
} 
#header { 
    position: absolute; 
    background-color:orange; 
    top: 0; 
    width:500px; 
    height:20px; 
    border-bottom: 2px solid blue; 
    text-align:center; 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    background-color:pink; 
    border-top: 2px solid blue; 
    width:100%; 
    height:20px; 
} 

jsfiddle