画布菜单在内容很少的页面上被切断答案

【问题标题】：off canvas menu gets cut off on pages that have very little content画布菜单在内容很少的页面上被切断
【发布时间】：2014-03-21 15:50:37
【问题描述】：

我正在尝试实现一个非画布菜单。我在 Smashing 杂志上找到了这个例子，并实现了菜单——除了只有少量内容的页面外，它工作得很好；滑出菜单中的项目仅显示在内容的最下方。

如果您有少量内容和大量菜单项，则 Smashing Magazine 上的示例无法正常工作。我在 Smashing Magazine 帖子上发表了评论，但没有收到回复。

Here's my jsfiddle

如果点击红色框，会出现菜单；它不能顺利滑出，因为我没有包含 javascript（我认为我的问题在于内包装和外包装中的 css）。菜单应该有 11 项，但您只能看到 8 项。

#outer-wrap {
position: relative;
overflow: hidden;
width: 100%;
}

#inner-wrap {
position: relative;
width: 100%;
}

我真的不想以其他方式重建菜单。非常感谢任何帮助！谢谢……

【问题讨论】：

标签： css navigation responsive-design

【解决方案1】：

您的菜单位于外包装 div 内，带有溢出：隐藏。这意味着任何超出外包装的元素都将被“隐藏”。只需删除溢出，它应该可以正常工作（或将其设为“可见”）

【讨论】：

我已经尝试过了，但是菜单并没有像以前那样一直填充到页面下方 100% 的空间，它只是停止了——它确实显示了所有导航元素，尽管这是一个改进。
好的。然后在你的 css 中添加：body、html、form {height:100%} 然后继续将 height:100% 添加到你的#outer-wrap、#inner-wrap、#nav 和 #nav .block 中，它应该一直持续到浏览器底部：jsfiddle.net/p2DFL/2
在我刚刚发布的修改后的小提琴中，一旦我点击红色方块，我就可以看到所有内容都在下降......甚至将浏览器设置为缩放：25%。如果需要，也将 height:100% 添加到#nav ul，但它不应该是必需的。记得将一个元素设置为“height:100%”所有父母都需要有相同的高度属性所以..如果body里面是一个“form”标签..或者html标签之外，将body设置为100%是不够的...所以为了安全起见，在响应式设计时，我总是在我的 css 上使用 html、body、form {height:100%}
谢谢@Alvaro...你能发布修改过的小提琴的链接吗？

【解决方案2】：

当视口宽度足够小并且您的nav 元素的位置从relative 变为absolute 时，这意味着它会跳出normal flow。所以它的视觉维度完全不会影响其他元素，从而导致视觉上不完整的菜单。

要修复它，您可以给nav 的父div 一个固定的高度或最小高度，或者将nav 的位置设置为relative 并以另一种方式显示。

好吧，也许你只是想要代码。

var lis = document.querySelectorAll("#nav li");
var minHeight = 41 * lis.length; //41 is the height in pixel of your single menu item
document.getElementById("#nav").style.minHeight = minHeight + 'px';

【讨论】：