Html CSS:4行流体，中心可滚动？

我们正在构建一个可以在桌面和移动设备上运行的应用程序，因此我们正在尽可能地使我们的站点动态化

在新设计中，我们有一个全宽、固定顶部、固定高度的页眉，然后是一个最大宽度页眉、固定位置页眉、固定最大宽度页脚底部，以及一个中心可滚动区域，以填充垂直空间的其余部分

我已经修复了页眉和页脚，看起来工作正常，但是中间的主体并没有填满中间的空间

这是我一直在使用的代码和小提琴：

我是不是错过了一些让内部部门正常工作的东西？这个解决方案可能吗

我想出来了

事实证明，这是可能的，我遗漏了身高：100%；在body标签上

---

一旦我添加了这个，中心区域就填满了空间，瞧，它滚动了！我还需要在insideInner div中添加一些填充（谢谢@alireza），这样标题就不会覆盖任何内容

我觉得有些垫子能让沙发更漂亮。在InsideInner中添加一些填充物帮助很大。

<div id="top">        
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>

<div id="sub">
    <div id="mid">
            <div id="inside">
                <div id="insideHeader">
                    <div style="float:left;color:white;">a<br /></div>
                    <div style="float:right;color:white;">a<br /></div>
                </div>
                <div id="insideInner">
                    <div id="div" style="float:left;color:white;">a
                    <div id="div" style="float:right;color:white;">1
                </div>
            </div>

        <div id="bot">
            <div style="float:left;color:white;">a<br /></div>
            <div style="float:right;color:white;">a<br /></div>
        </div>

    </div>
</div>

* {
    margin:        0;
}
html, body {
    margin:        0;

}
#top {
    height:        100px;
    width:        100%;
    background:    #f00;
    z-index:    5;
    margin:0px;
    padding:0px;
    position:fixed;
    top:0px;
}

#sub {
    position:relative;
    width:        100%;
    margin:100px 0 0;
    height:100%;
}

#mid {
    background:    #222;

    width:100%;  
    max-width:400px;
    height:100%;
    margin:0 auto;

}

#push {
    height:        150px;
}
#inside {
    width:100%;
    height:100%;
    padding:0 0 0 0;
    margin:50px 0 50px;
    overflow:auto;
}
#insideHeader {
    height:50px;
    background:    #0ff;
    width:100%;
    margin:100px auto 0;
    top:0px;
    position:fixed;
    max-width:400px;
}
#insideInner {
    height:100%;
    width:100%;
    display:table;
    overflow:auto;
}
#inside #div {
    height:        50px;
    width:        50px;
    background:    #888;
    border:        1px solid #fff;
}
#bot {
    position:    fixed;
    bottom:        0;
    height:        50px;
    width:        100%;
    max-width:     400px;
    background:    #0ff;
    z-index:    2;
    margin:0px auto;
    left:auto;
    right:auto;
}