html - 2 つの div 間のギャップを埋めるために div が必要

Question

次の HTML があるとします。

<div id="wrapper">
<div id="header">*header*</div>
<div id="content">*content*</div>
<div id="footer">*footer*</div>
</div>

そして、次の CSS:

#wrapper {
min-height:100%;
position:relative;
}
* {margin:0;padding:0;height:100%;}
#header {
    width:100%;
    height:auto;
    margin-top: 0;
}
#content {
    width:100%;
    height: auto;
    margin:0;
    margin-top:0;
    margin-bottom:0;
}
#footer {
    width:100%;
    height:auto;
    position:absolute;
    margin-top: 0;
    margin-bottom: 0;
    bottom:0;
    left:0;
}

コンテンツとフッターの div の間にギャップがあります。コンテンツの高さをヘッダーとフッターの間のすべてのスペースに設定するにはどうすればよいですか?

フッターには、ページの下部に配置するための「絶対」位置が必要です。