頁腳CSS問題

我正在製作一個Wordpress主題，但是頁腳有點問題。我希望它佔據窗口的100％，但它只佔用1200像素。我不知道爲什麼會這樣。在這裏，您有CSS代碼頁腳CSS問題

#navigationposition { 
    float:left; 
    color:#fff; 
    width: 100%; 
    height:200px; 
    position:relative; 
    bottom:0; 
    left:0; 
    background-attachment: fixed; 
    background-origin: initial; 
    background-clip: initial; 
    background-repeat: no-repeat; 
    background-position: 100% 0; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg"); 
}

Here's the link to the website

來源

2014-12-28 danula

看起來好像沒什麼問題 – vsync

通過檢測器檢測你的頁面。打開和關閉標記時出現不匹配，使頁腳看起來在內容區域內。 –

你DIV id=#container約束體頁腳不超過1200px。這是發生在這裏：

#container { 
max-width: 1200px; 
background-color: transparent; 
margin: 0 auto; 
}

你可以把你的頁腳的內容從容器中或從容器規則中刪除max-width:1200px。

希望得到這個幫助。

來源

2014-12-28 22:51:08 robjez

謝謝！ @robjez – danula

您的頁腳是div#container內具有1200像素寬度。搬出你div#navigationposition從div#container，它應該是好的;）

來源

2014-12-28 22:50:49 Maxime

這意味着你將這個div（導航位置）放在另一個具有固定寬度的地方，並且正在限制你的DIV。如果你不能訪問正在構建你的代碼，（很少有網站不允許你改變容器），那麼我認爲唯一可能的方式是使這個DIV（導航位置）絕對值爲bottom = 0（結果不會是同樣的，當你滾動）如果你能haveaccess所有代碼，然後更改包含DIV（navigationposition的div的寬度）

/*if you can change it*/ 

#container { 
    /*width:1200px;*/ 
    width:100%; 
} 

    /*Only if you cannot change its container*/ 

#navigationposition { 
    float:left; 
    color:#fff; 
    width: 100%; 
    height:200px; 
    position:absolute; 
    /*position:relative;*/ 
    bottom:0; 
    left:0; 
    background-attachment: fixed; 
    background-origin: initial; 
    background-clip: initial; 
    background-repeat: no-repeat; 
    background-position: 100% 0; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-image: url("http://www.lasvegasicc.org/wp-content/uploads/2013/08/Las-Vegas-Wallpaper-HD.jpeg"); 
}

來源

2014-12-28 22:58:40

回答

相關問題