使用固定導航滾動內容

我卡在這裏。我無法完全弄清楚正確的語法，以便讓我的網站佈局完全正確。使用固定導航滾動內容

我試圖有一個100％高度的固定寬度的側面導航，然後是100％寬度的固定高度的頂部導航，最後我希望我的內容佔據剩餘空間並具有獨立滾動。

我遇到的問題是內容滾動條被topNav欄重疊。

目前，我有我的CSS設置如下：

body 
{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

.sideNav 
{ 
    width: 100px; 
    height: 100%; 
    float: right; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: green; 
    z-index: 3; 
} 

.topNav 
{ 
    width: 100%; 
    height: 65px; 
    background-color: gold; 
    float: right; 
    position: relative; 
    z-index: 2; 
    text-align: right; 
} 
.content 
{ 
width: 100%; 
height: 100%; 
z-index: 1; 
background-color: blue; 
overflow-y: scroll; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
position: absolute; 
bottom: 0; 
right: 0; 
padding-left: 100px; 
border: 2px red inset; 
margin-top: 65px; 
}

這裏是小提琴，因爲我知道這聽起來有點混亂：jsFiddle

讓我知道如果有什麼事我可以提供。我用盡了所有的想法。

來源

2013-08-23 Barry Tormey

我看你的描述上的jsfiddle什麼，只是改變結果窗口的大小 –

您應該考慮使用網格系統，或者至少激勵自己從它，這裏是一個代碼示例https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L774-L1395 –

@JonathandeM。我不確定你的意思是通過改變結果窗口的大小。我遇到的問題是覆蓋內容中滾動條的頂部導航欄的重疊。網格系統也不能解決這個問題。 –

你幾乎有它的工作。只需要移除邊欄上的浮動（它完全被定位，所以不需要），然後從頂部導航頂部的高度偏移它的位置。是這樣的...

.sideNav 
{ 
    width: 100px; 
    height: 100%; 
    /*float: right; - not needed */ 
    position: absolute; 
    top: 65px; /* offset by the height of the top nav bar */ 
    left: 0; 
    background-color: green; 
    z-index: 3; 
} 
.content 
{ 
width: 100%; 
height: 100%; 
z-index: 1; 
background-color: blue; 
overflow-y: scroll; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
position: absolute; 
/* bottom: 0; - position from top instead for consistency */ 
top: 65px; 
right: 0; 
padding-left: 100px; 
border: 2px red inset; 
/* margin-top: 65px; - no longer needed */ 
}

這裏是更新後的小提琴http://jsfiddle.net/7cRL3/

來源

2013-08-23 01:53:34 monners

對不起，我想我不清楚。我遇到的問題是在內容部分的滾動條被topNav –

重疊我已經添加到我的回答 – monners

正確的，但現在滾動條的底部被切斷，由於div從頂部65px 。看到我的問題？我能想到的唯一方法是在css高度使用'calc'函數。 –

使用固定導航滾動內容

回答

相關問題