固定大小的div位於主屏幕右側，填滿屏幕的其餘部分

Question

我看過很多問題，但沒有一個能夠完全解決我的問題。

我有兩個div：mainbody和rightpanel。我希望rightpanel的大小是固定的（210px），並且坐在主體div的右側，它填滿了窗口的所有剩餘空間。

因此，這將調整如下：

+----------------------------------------+ 
|        |   | 
|        |   | 
|        |   | 
|  mainbody    |rightpanel| 
|        |   | 
|        |   | 
|        |   | 
+----------------------------------------+ 

+-------------------------------+ 
|     |   | 
|     |   | 
|     |   | 
| mainbody   |rightpanel| 
|     |   | 
|     |   | 
|     |   | 
+-------------------------------+ 

我整理以下的作品目前的解決方案，但如果窗口下方約900px調整到合適的欄上得到被推到了底部，25％的剩餘空間它太小以至於無法裝入，所以我強制窗口以此寬度水平滾動。

#wrap { 
    width:97%; 
    margin:0 auto; 
} 

#mainbody { 
    float:left; 
    width: 75%; 
    margin-right: 10px; 
    margin-left: 10px; 
} 

#rightpanel { 
    float:right; 
    width: 22%; 
    min-width: 210px; 
    max-width: 210px; 
} 

Answer 1

，如果你浮起來你需要把右面板的主要內容之前：

<div id="rightpanel">blah blah blah</div> 
<div id="mainbody">blah blah blah 
    blah blah blah 
    blah blah blah 
</div> 

<style type="text/css"> 
    #rightpanel { 
     width:210px; 
     float:right; 
     background-color:red; 
    } 
    #mainbody { 
     margin-right:210px; 
     background-color:blue; 
    } 
</style> 

即使調整了頁面大小，這也可以保持右側面板正確對齊。

Answer 2

#mainbody { 
float: left; 
} 
#rightpanel { 
width: 210px; 
} 

你有沒有嘗試過這樣的事情？

Answer 3

這應該工作在我的網站

<div id="container"> 
    <div id="left" style="background: #ff00ff; "> 
     Left 
     <div id="right" style="width: 210px; float: right; background: #ff0000;"> 
      Right 
     </div> 
    </div> 
</div> 

Answer 4

看：http://www.mcohenlawyer.com/
是你想要的嗎？

如果是，這是CSS代碼：
（在所有主要的瀏覽器都支持）

div.menubar { 
    position: fixed; /*can be absolute too*/ 
    width: 158px; 
    /*what comes latter is not relevant for your question*/ 
    /*......*/ 
} 
.body { /*the main body*/ 
    position: absolute; 
    right: 180px;/*can be 159px, if you don't want space between divs*/ 
    min-height: 870px; 
    /*what comes latter is not relevant for your question*/ 
    /*......*/ 
}