在CSS中使用max-width時如何進行灰邊距

Question

我希望頁面具有最大寬度和頁腳，如果窗口大於最大寬度，則將頁邊距設置為灰色以設置頁面的主要部分。 另外，我在底部有一個固定的頁腳。

我將背景色設置為灰色，然后將主要內容的顏色設置為白色，並設置頁邊距，除了主要div的高度沒有占據頁腳的所有空間之外，它都起作用，然后我得到了一個大塊在此未使用區域中顯示為灰色。

目標是大於1024px的空間的灰色邊距，一直到頁腳，無論主要div是否占用了所有空間。

這是我所擁有的：

<style>
body {
    background-color: gray;
    max-width:800px;
    margin: 0 auto;
}
#main {
    background-color: white;
}
#footer {
    text-align: center;
    max-width: 800px;
    background-color: white;
    position: fixed;
    bottom: 0px;
    width: 100%;
    margin: 0 auto;
}
</style>
<div id='main'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis tortor a nisl rhoncus, vitae aliquet lectus sodales.
</div>
<div id="footer">Footer Goes Here</div>

這給了。 您可以看到#main和#footer之間的灰色

有什么建議么？

Answer 1

如果我清楚地理解了您的要求，那么當width大於800px時，您希望在主要內容的左側和右側留有灰邊。 您應該設置主要內容的適當高度。 計算viewport高度並將其設置為主要內容高度。 檢查以下代碼或jsfiddle示例 。

 body { background-color: gray; max-width:800px; margin: 0 auto; } #main { background-color: white; height: calc(100vh - 50px); } #footer { text-align: center; max-width: 800px; background-color: white; position: fixed; bottom: 0px; width: 100%; margin: 0 auto; height:50px; } 

 <div id='main'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis tortor a nisl rhoncus, vitae aliquet lectus sodales. </div> <div id="footer">Footer Goes Here</div> 

您可能希望更改頁腳的高度，並相應地更改主要內容的height計算中的值。 例如，我將其設置為50px 。

要對其進行測試，請調整瀏覽器窗口的大小，以查看其灰色邊距（如果要在此處進行測試，jsfiddle的瀏覽器部分也將重新調整大小）。

注意-如果標題的高度也以px ，則必須在主要內容height計算中也包含該值。