固定的右側div滾動

我打算有一個右側導航欄和內容顯示在左邊的div。我試圖尋找類似的問題，試圖實施解決方案，但他們似乎沒有回答我的問題。如果有人能指引我正確的方向，我將不勝感激！ :)固定的右側div滾動

更新：http://jsfiddle.net/allenchuang/REWZ4/3/。這是我到目前爲止，但是當窗口調整大小和滾動需要時，滾動條出現在橙色div旁邊，而不是在瀏覽器窗口的右側。無論如何要避開它？

HTML

<body> 
    <div id="page"> 
    <header id="sidebar"> 
     <h1>Sidebar (Fixed Width)</h1> 

     <nav role="navigation"> 
     <ul> 
      <li><a href="#">Link One</a> 
      </li> 
      <li><a href="#">Link Two</a> 
      </li> 
      <li><a href="#">Link Three</a> 
      </li> 
     </ul> 
     </nav> 
    </header> 
    <article id="contentWrapper" role="main"> 
     <section id="content"> 
      <h1>Content (Fluid Width)</h1> 

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat.</p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat.</p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat.</p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </section> 
    </article> 
    </div> 
</body>

來源

2013-01-09 alchuang

這個怎麼樣：http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/？側邊欄在右邊應該不會有困難。 – Robin

@Robin我修改了您提供的網站上的代碼，但是當在一個小窗口中瀏覽時，滾動會出現在左側內容中。我希望它滾動整個窗口，並仍然固定右側導航欄。任何解決方法？見：http://jsfiddle.net/allenchuang/REWZ4/1/show/ – alchuang

.span9 { 
float: left; 
} 

.span3 { 
float: right; 
}

來源

2013-01-09 17:27:48 primetwig

我試過這個，但它不起作用。滾動條將顯示在span9旁邊，而不是停留在瀏覽器的右側。任何解決方法？ – alchuang

只要給這個代碼，這就需要有100％的高度列。

span 
{ 
    position:absolute; 
    height:100%; 
}

另請注意，父元素應具有100％的高度。你通常可以設置通過：

html, body 
{ 
    width:100%; 
    height:100%; 
}

來源

2013-01-09 20:24:07 shash7

固定的右側div滾動

回答

相關問題