固定位置

Question

我有以下网页（根据大卫·布舍尔关闭帆布响应菜单）：

http://kwedsd.byethost7.com/test.html

它显示了一个负责任的菜单（未完全正常工作），当你缩小浏览器的宽度三个水平线图标将可见。当你点击它时，菜单会滑入，这是我遇到问题的地方，因为所有链接都不可见。

首先，我希望菜单项能够一直列在页面的下方，而不限于主要内容的高度。其次，我想冻结主要内容，只需滚动菜单（如果您参考http://disney.com/?intoverride=true，这是我点击菜单时主要内容会冻结但菜单仍可滚动的示例）。

我已经尝试将设置位置固定到没有工作的主要内容。任何帮助，这将不胜感激。

在此先感谢。

Answer 1

您需要将#nav上的“溢出”值更改为“滚动”。所以你的CSS会显示为：

#nav { 
    position: absolute; 
    top: 0; 
    padding-top: 5.25em; 
    overflow: scroll; 
    etc...... 
} 

通过溢出：滚动，您至少可以让您的用户滚动浏览菜单列表。

Answer 2

你将不得不对你的css做很多改变，太多不能有效地列出来，并且足以让我自己测试完全不是非常容易。

这里的主要目标是使列表具有真正的高度，并且绝对位置元素在布局中被忽略。

删除#nav和#main元素上的translate3d属性，并使#nav位于左侧。然后，您必须充分利用#main元素上的溢出，宽度和其他一些属性，以使其显示您所希望的方式。

其中一些需要新规则，例如#nav { width: 0; } html.js-nav #nav { width: 70%; }，以便在应该显示菜单时进行转换。

这是一个起点，它应该让你处于比现在更好的位置，如果你陷入更深的困境，回来寻求更多的帮助。