如何將頁腳設置爲100％，如果身體是95％？

Question

我的任務是改變網站的位置，現在，網站的響應式佈局佔視口寬度的95％，因此它會在調整大小時進行調整。

這太好了，我希望它能夠繼續這樣做，但是我希望頁腳有一個側面冷靜的藍色背景，並且我無法想出一種方法來實現這一點原因。

任何人都可以幫忙嗎？

Answer 1

body包含所有其他元素。因此，你不應該在裏面有一個大於body的。

雖然你可以把它完全定位在左下角（position: absolute; bottom: 0px; left: 0px;）與100%以及可能的寬度使其工作，我建議你反而讓一個容器元素，也許是div，該body元素內包含95％寬度的元素並將頁腳放置在該容器外部。

但我不確定哪種方法更可靠。

Answer 2

您是否試圖用其他'包裝器'組件（div，span等）來包裝現有的'header'component？例如：

<div id="wrapper" width="100%" 

<div id="header" width="95%"> 
    some header stuff here 
</div> 

<!-- foo bar --> 

<div id="footer" width="100%"> 
    my footer 
</div> 

</div> 

Answer 3

試試這個 - DEMO

HTML

<div id="container"> 
    <h1>TITLE</h1> 

    <section>MAIN CONTENT</section> 

    <footer> FOOTER </footer> 
</div>​ 

CSS

#container { 
    width: 95%; 
    margin: auto; 
    background: honeydew; 
} 

footer { 
    position: absolute; 
    width: 100%; 
    background: beige; 
    margin-left: -2.5%; 
}