Question

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

如果查看代码段，可以看到内容#wrapper（黄色）与内容大小相同。但是当内容（#overflow，black）比包装器更高时，我无法得到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>

Answer 1

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

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

Here工作小提琴与你的榜样。

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

1 个答案: