固定的右菜单宽度为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; 

}