Increase a div height automatically (100% parent) leaving a top and bottom margin?

Question

http://jsfiddle.net/YumHS/

In the page given in the jsfiddle der is a sidebar in the cont div.

<section class="cont">
                <div class="sidebar">
                    <ul>
                      <li>sidebar</li>
                    </ul>
                </div>
                <div class="content">
                  <div class="cm_logo"><img src="img/turf_cm_logo.png"></div>
                </div>
</section>

The sidebar has a right border. Der is a 10px margin in the top side of the sidebar. Similarly I want 10 margin in the bottom part also. I have used 100% height so that div.sidebar fills up entire screen. But with this method margin is not available at bottom since i'm using a sticky footer. What can I do for this? Please help.

Check the jsfiddle for the demo, to understand my question

Answer 1

See the fiddle for code and demo

Fiddle: http://jsfiddle.net/YumHS/2

Demo: http://jsfiddle.net/YumHS/2/embedded/result/

Updated fiddle: 1280 x 800 Resolution as per your requirement.

http://jsfiddle.net/YumHS/5/embedded/result/

To get the desired output i use image of 1px x 2000px. and adjust the position of background image see the css below, you can set the height( see 110%;) of background image as you want.

.sidebar {
    position: fixed;
    top: 100px;
    width: 227px;
    /*border-right: 1px solid #949698;*/
    height: 100%;
    background: url("http://img152.imageshack.us/img152/8141/fullbar.png") no-repeat right 110%;
}

In my system it is looking like below image:

Updated fiddle http://jsfiddle.net/YumHS/11/embedded/result/ - with 2px space space in sidebar and footer.