固定的右菜單寬度爲100％

Question

當這個菜單位於左側時，100％寬度的內容很好，只要我從左到右交換菜單右側的內容現在是整個寬度的100％菜單之間的空間（其時，我的權限添加：0;在左邊的菜單，使它看起來正確的

jfiddle左側菜單中的：http://jsfiddle.net/mxadam/ZQQ6s/21/

jfiddle右鍵菜單：http://jsfiddle.net/mxadam/ZQQ6s/22/

左側菜單

html, body { 
height: 100%; 
margin: 0; 
font-size: 20px; 
} 

#left { 
width: 300px; 
height: 100%; 
position: fixed; 
outline: 1px solid; 
background: red; 
z-index: 10; 
} 

#right { 
width: 100%; 
height: auto; 
outline: 1px solid; 
position: absolute; 
right: 0; 
background: blue; 
left: 300px; 
border-left: 10px solid #fff; 
} 

右鍵菜單

html, body { 
height: 100%; 
margin: 0; 
font-size: 20px; 
} 

#left { 
width: 300px; 
height: 100%; 
position: fixed; 
outline: 1px solid; 
background: red; 
z-index: 10; 
right: 0; 
} 

#right { 
width: 100%; 
height: auto; 
outline: 1px solid; 
position: absolute; 
left: 0; 
background: blue; 
right: 300px; 
border-right: 10px solid #fff; 
} 

我能做些什麼呢？歡呼聲

Answer 1

取出width:100%。

left和right定位元素的absolute或fixed的座標足以計算所需的寬度。

Answer 2

只是刪除邊框：10px的..白色的空間也不過是邊境...

border-left: 10px solid #fff; 

要麼刪除或使其藍色或紅色，除去顏色區分.. :-)

編輯的jsfiddle（我知道是不是需要它：P）：http://jsfiddle.net/rahulrulez/ZQQ6s/23/

Answer 3

http://jsfiddle.net/xTPLG/

檢查此鏈接。它可能會幫助你。

#right { 

height: auto; 
outline: 1px solid; 
position: absolute; 
left: 0; 
background: blue; 
width:250px; 
border-right: 10px solid #fff; 

}