html - 在 CSS 中使用最大宽度时如何制作灰色边距

Question

我想要一个具有最大宽度和页脚的页面，如果窗口大于最大宽度，则将页边距设置为灰色以显示页面的主要部分。另外，我在底部有一个固定的页脚。

我将背景颜色设置为灰色，然后将主要内容的颜色设置为白色，并设置边距，除非主要 div 的高度不占用页脚的所有空间，否则我会得到在这个未使用的区域中有一大块灰色。

目标是为超过 1024 像素的空间设置灰色边距，一直到页脚，无论主 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 .

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 计算中。