用 div 将 jquery 页面分成两半答案

【问题标题】：divide jquery page in half with div用 div 将 jquery 页面分成两半
【发布时间】：2014-02-23 19:26:08
【问题描述】：

我正在为客户开发一个 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

【问题讨论】：

z-index可以优先吗？因此，如果我将 z-index 添加到我的所有 css 属性中，我可以优先考虑从 1 到 3，因为 1 是所有层中最顶层的？我仍然需要使用“mymiddle”作为，1）顶部 div 的页脚和#2 div 的页眉。这是更多的 css 吗？
z-index 仅在我保持位置：固定在 css 属性中时才有效。它还使我的代码被禁用，因为 z-index 覆盖了所有内容。是否有任何其他选项可以充当 1）顶部 div 的页脚和 #2 div 的页眉。我应该编辑 data-role="header" 的 css 属性还是为此问题创建一个全新的 div？
干得好 Moob！我称你为 coderunnerlabs 王国的 CSS 骑士。

标签： jquery css html containers

【解决方案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

【讨论】：

我也想知道inline-block 的定义。 Z-index 在这里当然是正确的选择，但您可能还想使用display:block。
@mrrogers 根本不需要display:，正如他所说：I am using a div class="mymiddle" DIV 默认为block（如果没有被覆盖）

【解决方案2】：

我不相信我完全理解这些要求，但如果你放弃固定位置并使用 css-table 布局，你可以实现这种外观。每个部分 - #header、#content1、#centerNav、#content2、#footer - 都可以描述为一个表格行，其中#header 位于顶部，#footer 位于底部。包含的“表格”被告知为可用高度和宽度的 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;}

【讨论】：

这些是嵌套表吗？这是不推荐使用的方法吗，这意味着如果我在网格中添加 javascript 或更强大的脚本，这种类型的布局会很好地处理 preetee 吗？