可摺疊的CSS左側列和自動擴展右側列...垂直擴展？

我有一個棘手的設計付諸實踐。將會有兩個CSS列，其左側是左側菜單（〜300px），當不用時摺疊爲85px。當菜單崩潰時，右列應擴展以填充可用空間。可摺疊的CSS左側列和自動擴展右側列...垂直擴展？

這本身是不是太棘手，我已經使用了溢出來實現它：隱藏招（基本上是一樣的CSS layout with 2 columns, taking up all width of browser, where left column can collapse接受的答案）

不過我現在在看我怎麼能有兩列垂直擴展以填充可用的屏幕空間。

左側可變寬度列似乎阻止我使用虛擬列技術。除此之外，我不確定。

我也有寬度的CSS轉換，這樣的崩潰/展開運動更流暢，我想保持。

任何意見將受到感謝。

編輯：爲什麼右欄是由1號線垂直偏移

html, body { height:100%;} 
#menu { width: 100%; height: 50px; } 
#container { overflow: hidden; height:100%; } 
#left-column { background:yellow; float:left; height:100%; width:300px; } 
#right-column { background:red; height:100%;} 
#container .shrink { width:85px; }

我不知道：這是接近我可以得到：http://jsfiddle.net/tsr5a/。另外請注意，儘管我可以在列上設置100％的高度，但這並未考慮頁面頂部的固定高度工具欄。

來源

2014-01-20 do_you_realise

你能提供一個小提琴展示在行動的問題？ –

@do_you_realise：**你知道**，它是一個棘手的事情和jsfiddle會在獲得答案更有幫助嗎？ :) – NoobEditor

謝謝:)我已經添加了一個jsfiddle我到目前爲止設法得到。歡呼 –

如果您從#container中刪除overflow: hidden;，它應該按照要求工作。

JSFiddle

#container {height:100%;}

編輯：我希望我理解正確你的問題/問題。

來源

2014-01-20 14:30:42 Craighead

謝謝 - 這似乎並沒有解決我的問題，但這只是我想讓每個列擴大到垂直填充屏幕。目前，我有'高度：100％;'在這些，但與固定高度的工具欄列現在太高。 –

好運

你需要包括此

#container{display:inline-flex;width:100%; } 
#right-column{;width:100%}

JSFiddle

來源

2014-01-20 14:44:52

可摺疊的CSS左側列和自動擴展右側列...垂直擴展？

回答

相關問題