How to make gray margins when using max-width in CSS

Question

I want a page that has a max-width and a footer, and set the margins gray to set out the main part of the page if the window is bigger than the max-width. Also, I have a fixed footer at the bottom.

I set the background color gray, then the color of the main content white, and set up the margins, which works except when the height of the main divs don't take up all the space to the footer, then I get a big block of gray in this unused area.

The goal is gray margins for space beyond 1024px, all the way down to the footer, irrespective if the main divs take up all the space or not.

Here is what I have:

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

Which gives this. You can see the gray between the #main and #footer

Any suggestions?

Could you create a container element that has a white background, and have that centered? — jhpratt, Nov 17 '17 at 03:03

Ram · Accepted Answer · 2017-11-17T03:44:13.527

If I have clearly understood your requirements then You wish to have gray margin left and right side of your main content when the width is more than 800px. You should set the proper height of main content. Calculate the viewport height and set it as the main content height. Check the below code or 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>

You may wish to change the height of your footer and accordingly change the value in height calculation of main content. I have set it 50px just for example.

To test it, please resize the browser window to see the gray margin (the jsfiddle's browser section is also re-sizable If you want to test there).

Note - If you also have header height in px, you will have to include that value too in the main content height calculation.

I really like your answer, I was unaware of the calc feature in CSS3, however, it is so new I worry about how limiting it would be were I to use it, and there isn't an obvious fall back. I'm interested in your thoughts on this concern. — Fraser Orr, Nov 17 '17 at 04:33
The viewport feature is responsive. You can use it without a second thought. This would work even if you try your code in different resolution mobile devices. Please accept the answer if it was helpful. — Ram, Nov 17 '17 at 04:46
To be confident before using this feature please go through the links https://developer.mozilla.org/en-US/docs/Web/CSS/calc and https://stackoverflow.com/q/21624014/5465632 — Ram, Nov 17 '17 at 05:10

How to make gray margins when using max-width in CSS

1 Answers1