修复了 100% 宽度内容的右侧菜单答案

【问题标题】：fixed right menu with 100% width content修复了 100% 宽度内容的右侧菜单
【发布时间】：2014-01-31 00:12:16
【问题描述】：

当这个菜单在左边时，100% 宽度的内容很好，只要我从左到右交换菜单，内容现在是 100% 的整个宽度，而不是菜单之间的空间（当我将 right: 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;
}

我能做什么？干杯

【问题讨论】：

这两个小提琴都显示左侧的菜单......
只需删除width:100% ...
感谢 cbroe，如果您将其作为答案，我将不予接受。干杯！

标签： html css

【解决方案1】：

删除width:100%。

absolute 或fixed 定位元素的left 和right 坐标足以计算所需的宽度。

【讨论】：

【解决方案2】：

只要去掉边框：10px..空白就是边框...

    border-left: 10px solid #fff;

要么将其删除，要么将其设为蓝色或红色以消除颜色区分.. :-)

已编辑 JSFiddle（我知道不需要 :P）：http://jsfiddle.net/rahulrulez/ZQQ6s/23/

【讨论】：

【解决方案3】：

http://jsfiddle.net/xTPLG/

检查此链接。它可能会对你有所帮助。

#right {

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

}

【讨论】：