Html 带有非固定集管的流体高度

我需要有一个标题和内容部分的网页

标题的内容将具有可变高度，内容也将具有可变高度。页面应为100%，如果内容分区溢出，则应显示一个滚动条（仅针对内容分区，而不是整个页面）

我想远离JQuery/JS解决方案，用CSS（sass？）解决这个问题

标题
具有最大高度的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

部门机构{
身高：100%；
}
分区标题{
最大高度：100px；
溢出：隐藏；
}
分区页脚{
溢出y:？？？
/*100%收割台高度*/
}

尝试一下：

div.body{
身高：100%；
}
分区标题{
背景色：#CCCCFF；
最大高度：100px；
文本对齐：居中；
溢出：隐藏；
}
部门内容{
高度：240px；
溢出：滚动；
}
分区页脚{
背景色：#中交；
文本对齐：居中；
溢出：隐藏；
}

标题
具有最大高度的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

具有scroll-y的可变内容

页脚
我是一个新手

我想要一个全屏页面，这将内容限制为固定的240像素。啊，好吧，我现在明白了。。给我几秒钟，我会发布一个新的答案，这可能有用。试试新的代码片段。如果运行代码段，请使用“完整页面”查看结果！标题最大为100px，现在您可以使用100px修复内容，而标题可以小于100px。当标题由于内容而变小时，会有一个间隙。嗯。。您需要一些jQuery来将动态元素添加到绝对位置元素。这只需要以下代码来解决该问题：

$（“.content”）.css（'top'，$（'.header'）.height（））。。注意：如果使用此选项，我建议将header div改为id->#header。
<div class="body"><!-- 100% height -->
    <div class="header">
        <h1>Header</h1>
        <p>Variable content with max-height</p>
    </div>
    <div class="content">
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
        <p>Variable content with scroll-y</p>
    </div>
</div>
<style>
    div.body{
        height: 100%;
    }
    div.header{
        max-height: 100px;
        overflow: hidden;
    }
    div.footer{
        overflow-y: ???
        /* 100% - height of header */
    }
</style>