如何在沒有隱藏滾動條的情況下放置右側導航欄？

考慮以下頁面：http://www5.atpages.jp/~syockit/testFixed.html 如何在沒有隱藏滾動條的情況下放置右側導航欄？

我創建一個頁面頁眉，頁腳和不捨中間容器和右側導航欄，以及在中間的內容區域。事情是，我希望內容的滾動條位於窗口的右側，而不是內容區域的右側（以便它可以遵循最大化模式下的Fitt定律）。使用當前樣式，正確的導航欄覆蓋滾動條，使其不可見。

我注意到，如果整個頁面的滾動條（即<body>）被啓用，導航欄將移動到左側。因此，一種解決方案是使用作爲內容。但是有沒有什麼辦法可以讓正確的導航欄移動到左側，以便在不需要iframe的情況下適應滾動條？

請參閱www5.atpages.jp/~syockit/testIframe.html，例如使用iframe。

2010-07-09 syockit

你的div＃內容擴展到右邊，你必須改變：這

 
#content { 
    padding-right: 150px 
}

這個

 
#content { 
    margin-right: 150px; 
}

來源

2010-07-09 08:37:04 jcubic

不，這會導致滾動條出現在中間。我想要的是滾動條位於窗口的邊緣。請參閱http://www5.atpages.jp/~syockit/testIframe.html，例如使用iframe。 – syockit 2010-07-10 11:32:47

然後將div右移15像素向左移動 #right { right：15px; } – jcubic 2010-07-11 11:02:13

耶，嘗試多一點之後，我終於找到了回答！經測試，在Chrome 11，火狐4，歌劇11

工作的CSS：

.middle { position: absolute; left: 120px; overflow: auto; } 
.content { padding-right: 150px; } 
.middle, .right-sidebar { top: 100px; bottom: 50px; } 
.right-outer { float: right; } 
.right-sidebar { position: fixed;} 
.right-outer, .right-sidebar { width: 150px; }

的HTML：

<div class='middle'> 
    <div class='right-outer'> 
    <div class='right-sidebar'> 
     Sidebar content goes here. 
    </div> 
    </div> 
    <div class='content'> 
    Content goes here. 
    </div> 
</div>

你可以看到工作演示在這裏：http://jsfiddle.net/b4kPm/2/

編輯：哎呀，它沒有在Opera 11中工作！我不知道出了什麼問題......

編輯2：Opera的絕對定位不會考慮滾動條。不得不使用float: right。

編輯3：正如我想的那樣......當內容被動態更改爲沒有溢出內容時，它不會自動重新調整。這隻適用於頁面加載或內容重新渲染。

來源

2011-03-09 14:24:08 syockit

該死的男人，這是一些甜蜜的CSS。做得好。 – Amit 2011-03-13 05:15:05

如何在沒有隱藏滾動條的情況下放置右側導航欄？

回答

相關問題