根据页眉和页脚高度改变高度的动态内容

Question

我正在尝试制作一个包含 3 个元素的页面：页眉、页脚和内容。顾名思义，我希望页眉贴在顶部，页脚在底部，内容介于两者之间。我已经做了一个布局，将页眉和页脚放在它们应该在的位置，但内容要么重叠，要么相反，内容应该变小。

我的问题是页眉和页脚将用于许多不同的事情，因此它们在高度方面是动态的。

有没有办法让内容填充页眉和页脚之间的剩余空间，而不重叠？

如果可能的话，我更喜欢纯 CSS，但如果那不可能，我也想要一个 JavaScript 建议。 :)

谢谢！

编辑：这是我得到的atm。

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

CSS：

#content {
    position:absolute;
    background: url('img/textures/fabric.png');
    background-color: gray;
    height:auto;
    width:auto;
    margin:0 auto 0 48px; /* Center content */
    left:0;
    right:0;
    top:0;
    bottom:0;
    text-align:center;  
}

#dashtop {
    position:fixed;
    width:auto;
    background-color:aqua;
    opacity: .5;
    margin-left: 48px;
    top:0;
    left:0;
    right:0;
    text-align:center;
}

#footer {
    position: fixed;
    margin-left: 48px;
    background-color:green;
    bottom:0;
    right:0;
    left:0;
    width:auto;
    height:auto;
    text-align:center;
    opacity:0.5;
    z-index:0;

}

Answer 1

对页眉和内容使用相对定位（无位置属性），对页脚使用固定定位。