使用具有固定页眉和页脚的 css 可变内容 div 高度

我在使用 CSS 时遇到了一些问题，正在向这个精彩的社区寻求帮助。

我正在尝试构建一个包含以下元素的布局：

1）标题区 2）页脚区域 3）左侧窗格 4）内容区

我提出了以下 CSS，但我不认为这是完成我需要的操作的最佳方式。

请在下面找到我正在寻找的图片以及所有详细信息。另外，下面是我当前的 CSS 和 html。

CSS:

* {
    margin: 0;
}

html, body {
   height: 100%;
   overflow: hidden;
        }

#wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px; 
}

#leftbar {
   float: left;
   width: 350px;
   background-color: #EAEAEA;
   height: 100%;
   position: absolute;
   z-index: -1;
}

#rightbar {
}

#footer {
   height: 100px;            
}               

#header {
   height: 100px;
}   

HTML:

<div id="wrapper">
    <div id="header">   </div>
        <div id="content">
            <div id="leftbar">  </div>
            <div id="rightbar"> </div>
        </div>
</div>
<div id="footer">  </div>                                                                          

所需布局：

请注意，虽然我不介意使用 jQuery 和 javascript 来完成此操作，但我想避免使用它。

任何帮助将不胜感激。

Thanks!

Does 这把小提琴满足您的要求吗？我不太清楚您是否希望页脚始终位于页面底部。

Update

这把小提琴页脚始终位于底部。