Question

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

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

我的页眉和页脚已经固定，看起来正常工作，但中心的主体并没有填满中心空间。

以下是我一直在工作的代码和小提琴：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工作正常的东西吗？这个解决方案是否可行？

Answer 1

我明白了！

原来它是可能而且我缺少高度：100％;在身体标签上。

一旦我补充说，中心区域填满了空间，瞧，滚动！我还需要在insideInner div中添加一些填充（感谢@alireza），所以标题没有覆盖任何一个。

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

1 个答案: