2014-01-30 135 views
0

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

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

我能做些什麼呢?歡呼聲

+1

這兩個小提琴顯示在左邊的菜單... – CBroe

+0

對不起,更新:) – mxadam

+0

只要刪除'寬度:100%'... – CBroe

回答

1

取出width:100%

leftright定位元素的absolutefixed的座標足以計算所需的寬度。

0

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

border-left: 10px solid #fff; 

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

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

0

http://jsfiddle.net/xTPLG/

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

#right { 

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

}

相關問題