Question

我正在使用purecss制作一个响应式网站。在我的页面中，我有一个HEADER和FOOTER;它们都是固定的，在它们之间我有内容，它已经离开垂直菜单，右边有一些内容。

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

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

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

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

Answer 1

<强> UPDATED FIDDLE

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

的Onload：

$(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;
}

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

1 个答案: