中心和佈局頁面沒有包裝並且有頁腳

閱讀這篇文章http://camendesign.com/code/developpeurs_sans_frontieres 我決定按照它的說法去掉我的網站設計中的包裝。給我的身體元素的寬度，給HTML和CSS不同的背景colours.etc中心和佈局頁面沒有包裝並且有頁腳

事情工作正常，我真的印象深刻，直到我需要添加頁腳。此刻，我有點卡住了。由於我的頁腳標籤必須位於body元素內部，所以它的寬度只能擴展到body元素的寬度（600px）。並且白色框仍圍繞着我的頁腳，而不是像預期的那樣在頁腳之前結束。

有沒有一種方法可以讓我得到頁腳要像您在其他網站（見任何頁腳在頁腳跨度不同顏色的頁面的整個寬度，而無需返回到包裝的div？

下面是截圖： enter image description here

來源

2011-04-04 learnjourney

您被限制爲最大寬度爲600px，因此最大寬度爲600px，而不是寬度爲100％。添加一個包裝;） – Blender 2011-04-04 05:24:59

Live Demo

<!DOCTYPE html> 
<style> 
    html {height: 100%; width: 680px; margin: 0 auto; padding: 0; 
     background: #c72;} 
    body { min-height: 100%; margin: 0; padding: 0 20px; 
     border: 1px solid black; border-width: 0 1px; 
     font: 13px/20px "Helvetica Neue", Arial, Helvetica, sans-serif; 
     color: #333; 
     background-color: #eee;} 
    #footer { 
     position: absolute; 
     width: 100%; 
     left: 0; 
     background: #ccc 
    } 
</style> 
<body> 
    Lorem ipsum dolor sit amet.. 

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

要意識到它不是"sticky"：http://jsbin.com/ifika6/2

來源

2011-04-04 22:28:08 thirtydot

+1會提示這一點。 – DouglasMarken 2011-04-05 08:11:15

我放棄了，最終決定不添加頁腳，但是您的回答最接近它。 +1 :)。 – learnjourney 2011-04-09 11:01:06

首先，頁腳DIV設置padding-bottom: 0的身體和margin-bottom: 0（或任何你使用），應使其觸底

來源

2011-04-04 05:26:10

OP詢問他們如何在「」爲固定寬度的頁面上製作100％寬度的頁腳。 – Blender 2011-04-04 05:30:46

@Blender：「而白色方塊仍圍繞着我的頁腳，而不是像預期的那樣在頁腳之前結束。」 – 2011-04-04 05:32:23

呵呵，不要緊。 – Blender 2011-04-04 05:41:01

如果我是你，然後我。會做以下事情：

的CSS

.wrapper{ 
    margin:0 auto; 
    width:980px;/*your width will goes here*/ 
    background: green; 
} 

.footer{ 
    background: red; /*your style will goes here*/ 
}

的HTML：

<div class="wrapper"> 
    MainContent will goes here..... 
</div> 
<div class="footer"> 
    this is footer..... 
</div>

希望它可以幫助你解決你的問題......

來源

2011-04-04 05:51:07 enam

我的目標是看看是否有辦法擺脫這種情況下的包裝，因爲那篇文章的重點。但是頁腳也跨越整個頁面。 :) – learnjourney 2011-04-04 05:58:48

兩件事情進入我的腦海。 1.不應該使用的「表格」和2.「Liquid」CSS佈局。你可以在這裏查看第二個選項教程：http://css.maxdesign.com.au/floatutorial/tutorial0916.htm – enam 2011-04-04 06:09:53

中心和佈局頁面沒有包裝並且有頁腳

回答

相關問題