responsive-design - 如何制作在屏幕调整大小时滚动的响应式菜单 div

Question

我正在使用 purecss 来制作响应式网站。在我的页面中，我有一个 HEADER 和 FOOTER；它们都是固定的，在它们之间我有 CONTENT，它有左侧垂直菜单，右侧有一些内容。

现在我想要实现的是，当发生任何调整大小时，我的左侧菜单应该有一个类似自己的滚动条，右侧的内容也应该有一个。此外，菜单 div 不应与页脚或页眉混合。

我不太确定，但我是否需要使用 mobile-webkits 来解决这个问题。

我找到了一些帮助： http: //filamentgroup.github.io/Overthrow/examples/2-column/

这是唯一的方法还是有其他图书馆可以帮助我？

Answer 1

更新的小提琴

基本上，我在 JQuery 中添加了在调整大小时更改左侧菜单高度的功能。这与 Y 的溢出相结合，迫使它具有滚动条。

负载：

$(function() {
var menuWrapper = $("#menu");
var height = $(window).height() - $("#header").height() - $("#footer").height();
menuWrapper.css("height", height);
});

调整大小时：

$(window).on('resize', function(){
var menuWrapper = $("#menu");
var height = $(window).height() - $("#header").height() - $("#footer").height();
menuWrapper.css("height", height);
});

CSS：

#menu {
    overflow-x: hidden;
    overflow-y: auto;
}