將jquery頁面劃分爲一半div

我正在爲客戶端開發一個UI，並且需要在索引頁面的中心添加一個導航欄來提供各種內容。我正在使用div class =「mymiddle」創建分隔，但落後於所有其他內容。可以通過導航欄創建2個完全獨立的可滾動網格嗎？在我想要完成更多的細節將jquery頁面劃分爲一半div

CSS

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

見鏈接的直觀描述。 Coderunnerlabs visual description

來源

2014-02-23 user3344107

燦的z-index有優先權？因此，如果我將z-index添加到所有CSS屬性中，我可以優先考慮1到3，因爲1是所有圖層中最頂層的一個？我仍然需要利用「mymiddle」，因爲1）頂部div的頁腳和＃2 div的頁眉。這是更多的CSS？ – user3344107

z-index只有當我保持位置：固定在CSS屬性中才有效。此外，它呈現我的代碼被禁用，因爲z-index覆蓋了一切。是否有任何其他選項可以充當1）頂部div的頁腳和＃2 div的頁眉。我應該編輯data-role =「header」的css屬性還是爲這個問題創建一個全新的div？ – user3344107

不錯的作品Moob！我將coderunnerlabs王國的css騎士配音。 – user3344107

我不相信我完全理解的要求，但如果你溝固定的位置，你可以做到這一點的外觀和使用CSS表格佈局。每個部分 - #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;}

來源

2014-02-23 23:24:20 Moob

是這些嵌套表嗎？這是一個不推薦的方法，這意味着如果我在網格中添加javascript或更強大的腳本，這種類型的佈局是否可以處理好受保人？ – user3344107

地址：

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

來源

2014-02-23 19:28:48

我也想知道'inline-block'的定義。 Z-index當然是正確的選擇，但是你也可以使用'display：block'。 –

@mrrogers比你不需要'display：'在所有原因，因爲他說：'我正在使用div class =「mymiddle」DIV默認是'block'（如果不覆蓋） –

真正的數據。說得好。 –

將jquery頁面劃分爲一半div

回答

相關問題