javascript - 超出页面高度的响应式菜单

Question

我有一个超出页面高度的响应式菜单，这意味着用户在短页面(内容很少的页面)上看不到下方的菜单项

jsfiddle - http://jsfiddle.net/ashconnolly/QDznX/

我知道这是因为我的导航是绝对定位的，但是如果我将导航设置为相对定位，它会将其下方的页面内容向下推。

我怎样才能更好地管理我的 html + css 来解决这个问题？

或

在javascript中，当主体高度小于菜单高度时，如何将主体高度设置为与菜单相同？

希望你能帮上忙!

Answer 1

你可以通过CSS实现这个

只需为 nav.active 添加几个 overflow 和 height 的 css 属性

 nav.active {
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
     height: 100%;
        overflow: auto;
    }

这是一个

fiddle