CSS：響應式左側菜單，右側欄中的內容？

我正在嘗試創建一個響應式佈局，左側邊欄在較窄的屏幕上摺疊。有點像http://purecss.io/，但也有一個固定的頂部標題。CSS：響應式左側菜單，右側欄中的內容？

我的工作至今（代碼實在是太長，在這裏重現）：http://jsbin.com/uhalic/3/edit

有跡象表明，我掙扎修復（NB兩個問題你需要做出比450像素寬的HTML部分重現這些）：

（1）列表的最後一個元素正在橫向移動，無緣無故我能理解。

enter image description here

（2）頁腳應在視覺上完全包含在#main（紅色部分），而事實上這就是它的語義，但文本部分落入#sidebar（藍色部分）。

enter image description here

我在做什麼錯？

2013-07-23 Richard

你想要左側邊欄被粘？我的意思是，即使你滾動，它應該始終在頂端嗎？ /編輯：類似的東西？ http://jsbin.com/uhalic/5/ – Kamil

這是因爲紅色欄的左側沒有<li>元素，所以實際上在紅色部分有4個正在傾斜的元素，其中兩個在每個可見區域的左側，但是被隱藏。

您需要將margin-left: 160px添加到.results類中。然後從.result中刪除width: 100%，或者如果要保留它，請將它作爲100％。

此外，添加margin-left: 200px到#footer

2013-07-23 14:09:59 ediblecode

啊！非常感謝。 – Richard

回答