中东DIV与CSS 100％？ [重复](Middle div with 100% in CSS

可能重复：
CSS -个高度

我不能得到的3个div的中期股利，以适应可用空间的100％。

<body>
<div id="container">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
</div>
</body>

我的CSS是：

html, body {
    margin: 0;
    padding: 0;
    border:1px;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
}
#container {
    height: 100%;
    width: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background: #069;
}
#content {
    height: 100%;
    width: 100%;
    background: #F60;
}
#footer {
    height: 75px;
    width: 100%;
    background: #060;
}

中心格实际上是为100％，但其不配合的可用空间。

这是做这样的事情：如果屏幕为500像素

30px
100% (500px)
30px

我需要的是：

30px
100% (460px)
30px

这是可能的withouth的使用JavaScript？

非常感谢

编辑：
对不起，我的意思身高我有3个要素，头，中，尾。 页眉和页脚有固定的高度，但我想中间，以适应所有可用空间

发现基于其他计算器问题的另一个解决方案：

* { margin: 0; padding: 0 }
html, body {
    margin: 0;
    padding: 0;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
    border: 0;
}
#header
{
    height: 100px;
    background:#C60;
}

#container
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
    background:#096;
}

#footer
{
    height: 100px; /*Push must be same height as Footer */
    background:#C60;
}

HTML

<body>
<div id="container">
<div id="header"> </div>
<div id="content"> </div>
</div>
<div id="footer"> </div>
</body>

Answer 1:

尝试这样的jsfiddle 。

HTML

<body>
    <div id="wrap">
<div id="container">
    <div id="header">header
    </div>
    <div id="content">qweW
    </div>
</div>
</div>
    <div id="footer">footer
    </div>
</body>

CSS

* { margin: 0; padding: 0 }
html, body {
    margin: 0;
    padding: 0;
    border:1px;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
    background: #F60;
}
#container {
    width: 100%;
    padding-bottom: 75px;
}
#wrap {min-height: 100%;}
#header {
    height: 100px;
    width: 100%;
    background: #069;
}
#content {
    height: 100%;
    width: 100%;
}
#footer {
    position: relative;
    margin-top: -75px;
    clear:both;
    height: 75px;
    width: 100%;
    background: green;
}

我调整了自己的HTML中添加一个“包装”周围的“容器” DIV，并移动“页脚”出来的都有。

Answer 2:

你可以绝对定位的div：

<body>    
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
</body>

和

#header {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height: 100px;
    background: #069;
}
#content {
    position:absolute;
    top: 100px;
    bottom: 75px;
    left:0px;
    right:0px;
    background: #F60;
}
#footer {
    position:absolute;
    bottom: 0px;
    height: 75px;
    left:0px;
    right:0px;
    width: 100%;
    background: #060;
}