設置頁腳寬度

您好，我有以下問題。我嵌入我的頁腳寬度和高度。到目前爲止，頁腳沒有背景顏色。現在我認爲應該讓頁腳在整個寬度上伸展並給它一個背景顏色。設置頁腳寬度

我的問題是，我不知道如何讓頁腳填充顏色，很容易就可以簡單地說出「reapeat-x」這種顏色。我用我的背景body做了。我無法輕鬆創建圖像，因爲主頁的內容不固定在一個高度。我也想知道如何認識到這個例子的頁腳會保持在底部？

我發現了一個例子，你能明白我的意思，當你調整這個頁面上的解決方案：

http://razzi.me/tour

希望這清楚什麼，我想要的目的。如果有人能夠幫助我，我真的很感激。

非常感謝。

來源

2012-07-16 bonny

'背景color' – Inkbug 2012-07-16 13:59:09

沒錯，但這只是填充顏色。那不是問題。我得到的問題是當我使用背景色時，我有一個固定的寬度。 – bonny 2012-07-16 14:00:00

你是否希望擁有它，以便你的背景只填充一定的頁腳寬度，而不是整個頁面？ – 2012-07-16 14:02:08

爲了達到這種效果，你需要將你的頁腳包裝之外。我通常使用這個sticky footer。

HTML

<div class="wrapper"> 
    <div class="push"></div> 
</div> 
<div class="footer"></div

CSS

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto; 
    margin: 0 auto -50px; 
    width: 960px; 
} 
.footer, .push { 
    height: 50px; 
} 

.footer { 
    width: 100%; 
    background: blue; 
}

JS小提琴：http://jsfiddle.net/3KDYX/

來源

2012-07-16 14:11:51 JSW189

嗨，我試着用這個例子。我的隱藏div仍然存在問題。在打開觸發器的情況下，頁腳不會移動到頁面的末尾。它會跨越隱藏的div。我有一個476px的固定div。之後有一個按鈕被按下時會顯示另一個div。 – bonny 2012-07-19 11:52:45

@bonny。你能更具體地向我展示你的代碼嗎？創建一個[JS小提琴]（http：// jsfiddle。淨）與您的源代碼將是我的理想幫助你。 – JSW189 2012-07-19 13:13:56

當然，在這裏你有：http://jsfiddle.net/9Cuee/謝謝。 – bonny 2012-07-19 17:18:55

我正好不知道什麼佈局你在你的代碼，但如果你想有全寬頁腳和內容是爲960px，你可以做設置佈局爲：

<body> 
    <div id="header"> 

     <div class="wrapper"> 

     </div> 

    </div> 

    <div id="container" class="wrapper"> 

     //your container with 960px width 

    </div> 

    <div id="footer"> 

     <div class="wrapper"> 

     </div> 

    </div> 
</body> 
<!-- I suggested to have a wrapper in header and footer so that 
    your text or links or whatever you have could be in 960px width 
    but your header and footer backgrounds spawns to full-width 
-->

和CSS的會是這樣：

body { width:100% } 

#header, #footer { width:100% } 

.wrapper { width:960px } 

#footer { clear:both; height:100px; bottom:0; display:block; background-color:#555; }

來源

2012-07-16 14:09:45 Asif

如果你想擁有頁腳背景顏色延伸到窗口的寬度爲100％，它將不得不搬出你的mainwrapper的。喜歡的東西：

<div id="mainwrapper"> 
    stuff goes here 
</div> 
<div id="footerwrapper"> 
    <footer> 
     Stuff goes here 
    </footer> 
</div>

然後，在CSS：

#mainwrapper { 
    width: 960px; 
    margin: 0 auto; 
} 

#footerwrapper { 
    background-color: blue /* or whatever */; 
} 

footer { 
    width: 960px; 
    margin: 0 auto; 
}

來源

2012-07-16 14:11:07 chipcullen

設置頁腳寬度

回答

相關問題