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;

}

修复了100％宽度内容的右侧菜单

3 个答案: