在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 example。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可能希望更改页脚的高度，并相应地更改height主要内容计算中的值。我仅举例说明了50px。

要测试它，请调整浏览器窗口的大小以查看灰色边距（jsfiddle的浏览器部分也可以重新调整大小如果你想在那里进行测试）。

注意 - 如果您在px中也有标题高度，则必须在主要内容height计算中包含该值。