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

【问题标题】：how to make responsive menu div which scrolls when screen resizes如何制作在屏幕调整大小时滚动的响应式菜单 div
【发布时间】：2015-08-18 05:35:01
【问题描述】：

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

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

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

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

这是唯一的方法还是有任何其他库可以帮助我？

【问题讨论】：

你的代码现在是什么样子的？你试过什么？我们可以回答具体问题，但无法为您进行布局/设计。
jsfiddle.net/Y5Ktt

标签： responsive-design yui-pure-css

【解决方案1】：

UPDATED FIDDLE

基本上，我在 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;
}

【讨论】：