具有动态页眉，页脚和内容的CSS和html

Question

我正在尝试将页眉，内容和页脚作为动态字段。 尝试了许多不同的解决方案，并且它必须在多个实例中工作。 我只需要在内容区域中使用滚动条，所以我没有在页脚上使用绝对零。 但是使用表格布局。

如果看一下代码片段，您可以看到内容#wrapper（yellow）与内容具有相同的大小。 但是当内容（#overflow，黑色）比包装器高时，我无法获得帮助。

我知道一个小的脚本可以解决这个问题，但是使用CSS可以吗？

下面的链接是类似的，但是没有好的答案。 可能是这样，如果有可能在内容区域中获得可用的滚动条。

CSS 100％高度布局。 流体页眉，页脚和内容。 在IE10和Firefox中

 <style> body { margin:0; padding:0; height:100%; width:100%; overflow:hidden; } #wrap { height: 150px; width: 400px; display:table; position:absolute; text-align:center; table-layout:fixed; border:1px solid black; } #header{ display:table-row; border:1px solid red; background:green; } #content{ height: 100%; background:blue; display:table-cell; } #wrapper{ width:100%; min-height:100%; box-sizing:border-box; border:10px solid yellow; position:relative; overflow:scroll; display:block; } #footer{ width: 100%; display:table-row; background:green; } </style> <body> <div id="wrap"> <div id="header"> HEADER </div> <div id="content"> <div id="wrapper"> <div id="overflow" style="height:50px;width:1px;border:10px solid black;"></div> </div> </div> <div id="footer"> FOOTER </div> </div> </body> 

Answer 1

您应该为包装元素指定一个高度

#wrapper{
    width:100%;
    /*min-height:100%;*/
    height:100px;
    box-sizing:border-box;
    border:10px solid yellow;
    position:relative;
    overflow:scroll;
    display:block;
}

在这里 ，工作提琴与您的例子。