CSS Wrapper Extending Content

[Deadweight]

So either I'm braindead, not thinking, or just plain stupid (maybe all three)
I currently have two simple html elements


<div id="mainWrapper">
<div id="content">
x
</div>
</div>


My css currently contain:


* {
margin: 0px auto; padding: 0px;
font: 14px/28px Arial, sans-serif;
}
li {list-style: none;}

body { background: #F5F4ED; }
html, body { height: 100%; }


I am wanting the first #mainWrapper to be 100% on the head/body which I know is height: 100%;
However, the issue is I also want the #content to be 40px lower while being the reminder of the space (at least). EG height: calc(100% - 40px); while the mainWrapper still being at the top of the page.

If there is more content in the #content section then it would auto-fit to the end else, like before, 100% - 40px

Any ideas?

[Deadweight]

NVM: For anyone else (https://jsfiddle.net/k4z9zgfr/)

[molendijk]

Even simpler:
<style>
#top_bar {position: fixed; left:0; top:0; right:0; height: 40px; background: red}
#content {position: absolute; left:0; top: 40px; right: 0; bottom:0; background: green; overflow: auto}
</style>

<div id="top_bar">top bar</div>

<div id="content">Content</div>

[Deadweight]

Thanks but there is a slight difference that I wanted to take in effect with mine. Scrollbar is the 100% of the height, not just the content.
I know it might seem illogical and weird but it's what I am trying to do.

[molendijk]

Scrollbar is the 100% of the height, not just the content.
Sorry, I didn't realize that. In that case, you can also do (I don't think you need the min-height for html,body and #content):
<style>
#topbar, #mainWrapper {left:0; top: 0; right:0}

#topbar {position: fixed; height: 40px; z-index: 1; background: red}

#mainWrapper {position:absolute; bottom:0; padding-top: 40px}

#mainWrapper, #content {background:green}
</style>

<div id="topbar"></div>

<div id="mainWrapper" >
<div id="content">
content
</div>
</div>