CSS 960填充頁

我使用的是http://960.gs/，我希望我的container_12類填充頁面。CSS 960填充頁

編輯：只填充高度。

我想：

.container_12{ 
    background-image:url(../images/background_2.png); 
    background-position:center top; 
    background-repeat:no-repeat; 
    min-height:100%; 
    height:auto; 
}

但沒有任何反應。

來源

2012-12-30 GerardMT

設置爲'100％'寬度和高度的元素從父元素的寬度和高度繼承。如果'html，body'元素沒有'height：100％'，則不會發生。此外，您還必須管理填充和邊距。我假設960.gs爲你處理這個問題，但以防萬一。 –

謝謝。我有body {height：auto;}並且是錯誤的。 – GerardMT

的.container_12類有一個固定的寬度（你猜對了，960像素），所以它不會填補了整個頁面。你想設置它的父元素的背景 - 這可以是body或一個容器div。

body { 
    background-image:url(../images/background_2.png); 
    background-position:center top; 
    background-repeat:no-repeat; 
}

看那風格this demo page - .container_12有粉紅色/白色條狀背景，只佔用960像素。藍色的背景佔用了整個頁面設置上body：

body { 
    background: #123; 
}

爲了讓.container_12佔據頁面的整個高度，你需要設置它的高度，具有的高度沿其父元素至100％;

html, body { 
    height: 100%; 
} 
.container_12 { 
    height: 100%; 
    background-color:#ccc; 
}

爲什麼你必須指定父元素的高度？ .container_12的高度是100％，100％的什麼？它是父元素。

來源

2012-12-30 22:52:27 sachleen

你有理由。對不起，我已經解決了這個問題。只填充高度。 – GerardMT

沒問題，我更新了我的答案。 – sachleen

謝謝。我的身體錯了，因爲你有body {height：auto;} – GerardMT

這是因爲你想要一個大的背景圖像嗎？爲什麼不直接使用：

body { 
    background-image:url(../images/background_2.png); 
    background-position:center top; 
    background-repeat:no-repeat; 
}

來源

2012-12-30 22:50:29

坦克但在後臺我有其他圖片。 – GerardMT

回答

相關問題