0

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

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

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

这是我一直在工作的代码和小提琴：http: //jsfiddle.net/chazthetic/KE5cX/2/

<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>

以及随附的 CSS：

* {
    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;
}

我是否缺少使内部 div 正常工作的东西？这个解决方案甚至可能吗？

4

1 回答 1

0

我想到了！

事实证明这是可能的，我错过了 height:100%; 在身体标签上。

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

于 2013-09-11T15:32:25.193 回答