Question

我正在为客户开发UI，需要在索引页面的中心添加一个导航栏，以提供各种内容。我使用div class =“mymiddle”来创建分离，但落后于所有其他内容。是否可以通过导航栏创建2个完全独立的可滚动网格？

CSS

.mymiddle {
position:fixed;
overflow:scroll;
display:inline-block;
left:0px;
top:225px;
bottom:0px;
width:640px;
}

有关我正在尝试完成的内容的详细信息，请参阅链接以获取视觉描述。 Coderunnerlabs visual description

Answer 1

添加：

z-index: 1; /* or higher */

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index

Answer 2

我不相信我完全理解这些要求，但如果你放弃固定位置并使用css-table布局，你就可以实现这种外观。每个部分 - #header，#content1，#centerNav，#content2，#footer - 都可以描述为#header所在的表格行顶部和底部#footer。包含'table'被告知是可用高度和宽度的100％，两个可滚动区域由#centerNav分隔。

Here's a jsFiddle that better explains the solution.

<强> HTML：

<div id="layout">
    <div id="header">HEADER and LOGO</div> 
    <div id="container1">
        <div class="scrollable">Container 1...</div>
    </div>
    <div id="centerNav">
        centerNav divide thingummie
    </div> 
    <div id="container2">
        <div class="scrollable">Container 2...</div>
    </div>
    <div id="footer">
        FOOTER and LOGO
    </div>
</div>

<强> CSS：

html, body {height:100%; width:100%; margin:0;}
#layout {display:table; height:100%; width:100%;}
#header, #centerNav, #footer, #container1, #container2 {display:table-row;}
#header, #centerNav, #footer {font-size:20px; background:#333; color:white; height:0; padding:20px;}
#container1 {background:#eeffff; color:#333; height:30%;}
#container2 {background:#ffeeff; color:#333;}
.scrollable {height:100%; overflow:auto;}

用div分割jquery页面一半

2 个答案: