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

我正在尝试创建一个包含3个元素的页面：页眉、页脚和内容。顾名思义，我希望页眉贴在顶部，页脚贴在底部，内容夹在两者之间。我已经做了一个布局，它把页眉和页脚放在它们应该在的地方，但是内容要么重叠，要么反过来，内容应该变小

我的问题是页眉和页脚将用于许多不同的事情，因此当涉及到高度时，它们是动态的

有没有办法让内容填满页眉和页脚之间的空白，而不重叠

如果可能的话，我更喜欢纯CSS，但如果不可能，我也希望有一个JavaScript建议。：）

谢谢

编辑：这是我在atm机上得到的

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

---

}

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

这应该已经是默认行为。删除所有高度属性，然后查看结果是否符合您的要求。不要使用绝对定位。你的意思是你希望每页有一个固定的总高度，并且当页眉和页脚变大时，你希望页面内容缩小，比如。contentheight=fixedpageheight headerheight footerheight？您已经完成的工作也会很有用！我正在添加一些代码。没有固定的高度，它是动态的，因为页面的设计是根据它所浏览的设备进行缩放的。所以它更像是：contentheight=windowheight-（headerheight+footerheight），如果窗口不够高，无法显示页眉、内容和页脚，你想怎么做？好的，实际上是这样的。。也许吧。：）现在我的问题是，内容没有填满页眉和页脚之间的空间，而是只覆盖了内部内容。现在看起来是这样的：Aqua=页眉灰色=内容（应该一直扩展到页脚）绿色=页脚忽略红色，这只是另一个条，但已经按预期工作了，这可能会有帮助：好吧，我已经检查了链接，（有一些中断），似乎我不能真正使用它，因为它需要将内容设置为绝对值，这使得它忽略了流，只是坐在我的标题的正上方。可能只是因为这样更容易。在这里您可以找到一些JavaScript解决方案。

#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;