Html 固定右菜单与100%宽度的内容

当此菜单位于左侧时，100%宽度的内容就可以了，只要我将菜单从左向右切换，内容现在是整个宽度的100%，而不是菜单之间的空间（当我将右侧添加到左侧菜单时：0；使其显示在右侧）

jFIDLE左菜单：

JFIDLE右菜单：

左菜单

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;
}

---

我能做什么？干杯只需删除边框：10px..空白只是边框

    border-left: 10px solid #fff;

将其移除或使其变为蓝色或红色以移除颜色区分…-）

编辑的JSFIDLE（我知道不需要它：p）：

检查此链接。这可能对你有帮助

#right {

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

---

}

移除

宽度：100%

---

绝对值

或

固定值

定位元素的

左侧

和

右侧

坐标足以计算所需的宽度。

这两个小提琴都在左侧显示菜单…只需删除

宽度：100%

…谢谢cbroe，如果您将其作为答案，我将接受。干杯