Css 最后制作堆叠div'；页眉/页脚内部的s为剩余页眉/页脚的100%高度

目前正试图找到一个干净的解决方案来实现下面的边栏布局

• 标题
• 第1节，更新与内容对齐的（动态）高度
• 第2节，该节利用剩余的高度和内容，需要滚动，如果它不再适合
• 页脚

如何使第2节将第1节和页脚之间的剩余空间视为“我没有尝试过”而实现

#data_section {
    /*Section 2*/
    position: relative;
    background: red;

    /* This needs to be 100% of the 'reset' excluding the footer */
    /*height: 100%;*/

    /* he content needs to scroll if it outgrows the height */
    /*overflow-y: scroll;*/
}

对于这种布局，是否有一种CSS唯一的解决方案可以在>=IE9和当前的FF、Chrome、Safari版本上使用

由于它是一个以JavaScript为中心的应用程序的一部分，因此没有任何东西反对使用JS来计算维度。但是，当涉及到CSS和它的功能时，我总是很难理解，如果只使用CSS，那么看看是否有一种“干净的方式”就好了

---

在不让第2节去做它应该做的事情的情况下，摆弄基本布局。

我建议使用

display:table和
显示：表行
。这些显示类型的妙处在于，行将尝试填充整个表，并将内容放入其中。因此，您可以设置
高度：0到只适合内容的行，让第2节只填充其余的行

假设您没有按小提琴演奏的内容，我的建议是添加：
填充底部：90%；//根据您的需要调整

到
#data_部分中的css的值，因为这将在不影响页脚的情况下标记整个剩余区域的颜色
 请在没有注释的情况下显示css和html……你能提供标记吗？？？使用相同的html结构对你来说重要吗？你不能修改它吗？实际上，我会绝对地将数据包装部分中的页脚定位在底部，而数据包装本身将绝对地定位在底部。@Chandranshu结构并不重要。小提琴只是我的第一稿，我被卡住了。@Mayank当前的标记显示在链接的小提琴中。有什么问题吗？检查过了…我的错！！：）看起来不错。从未真正使用过CSS表。但很高兴看到它使这种em非常容易解决。