带有动态页眉、页脚和内容的 CSS 和 html答案

【问题标题】：CSS and html with dynamic header,footer and content带有动态页眉、页脚和内容的 CSS 和 html
【发布时间】：2015-01-12 22:28:03
【问题描述】：

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

如果查看代码sn-p，可以看到内容#wrapper(yellow) 与内容大小相同。但是当内容（#overflow，黑色）比包装器高时，我无法获得 scoller。

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

下面的链接是类似的，但没有好的答案。也许可以，如果可以在内容区域中获得工作滚动条。

CSS 100% height layout. Fluid header, footer and content. In IE10 and 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>

【问题讨论】：

标签： html css

【解决方案1】：

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

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

Here 用你的例子工作的小提琴。

【讨论】：

感谢您的回答，但我真的希望它是动态的。如果我调整主 div 的大小（#wrap），那么您的静态值将是错误的。我正在尝试获得更少的代码...
如果你垂直调整#wrap？
当然，双向。它将用于用户调整大小、拖放。包括嵌套..我希望我可以像电脑上的窗口一样使用它....