-1 
<html>
    <head>
        <style>
            body {
                border:0;
                overflow:hidden;
                padding:0;
                margin:0;
            }

            .tablecontent {
                display: table; 
                height:100%; 
                width:100%;
            }

            .head {
                display: table-row; 
                height:10%; 
                background-color:red;
            }

            .content {
                display: table-row; 
                height:85%; 
                background-color:black; 
            }

            .bodycontent {
                padding: 10px 10px 10px 10px;
            }

            .foot {
                display: table-row;
                height:5%;
                background-color:yellow;
            }

            .contentscroll {
                height:100%;
                background-color:blue;
                overflow-y:scroll
            }
        </style>
    </head>
    <body>
        <div class="tablecontent">
            <div class="head">HEADER</div>

            <div class="bodycontent content">
                <div class="tablecontent">
                    <div class="head">INNER-HEADER</div>
                    <div class="content">

                        <div class="contentscroll"></div>

                    </div>  
                    <div class="foot">INNER-FOOTER</div>
                </div>
            </div>

            <div class="foot">FOOTER</div>
    </div>
   </body>
</html>

这在 IE6、Firefox 和 Chrome 中显示了不同的结果（抱歉，我无法发布图片）。您必须在 div ( overflow-y:scroll) 中添加负载以强制溢出。
重复，例如：

alskdjflasjdfklasjdflajk<br/>
alskdjflasjdfklasjdflajk<br/>
alskdjflasjdfklasjdflajk<br/>

IE6 - OK 填充和溢出
Chrome - OK 溢出。填充？
Firefox - 溢出和填充？

4

1 回答 1

0

<!DOCTYPE HTML>在之前添加<html>，如下所示： 

<!DOCTYPE HTML>
<html>

送给： 

.bodycontent {
    display: block;
}
.contentscroll {
    min-height: 50px; /* for example */
}
于 2013-04-12T10:04:17.947 回答