CSS：响应式左侧菜单，内容在右侧列中？

我试图创建一个响应性强的布局，左侧的边栏可以折叠在更窄的屏幕上。有点像，但也有一个固定的顶部标题

到目前为止，我的工作（代码实在太长，无法在这里复制）：

我正在努力解决两个问题（注意，您需要使HTML部分的宽度大于450px才能重现这些问题）：

（1） 列表中的最后一个元素被移到了一边，这是我无法理解的

（2） 页脚应该在视觉上完全包含在

#main

（红色部分）中，实际上这就是它在语义上的位置，但文本部分落入

#侧栏

（蓝色部分）

---

我做错了什么

这是因为红色列的左侧没有

元素，所以在红色部分中实际上有4个

元素是倾斜的，两个在每个可见元素的左侧，但被隐藏

您需要在

.results

类中添加

左边距：160px

。然后将

宽度：100%

从.result中移除，或者如果要保留它，则将其作为100%

---

另外，将

marginleft:200px

添加到

#footer

是否希望左侧边栏保持粘性？我的意思是，即使你滚动，它也应该一直在顶部吗？/编辑：是这样的吗？啊!！非常感谢。