固定布局滚动水平像Google Plus

我想创建一个类似于Google Plus的布局。固定布局滚动水平像Google Plus

现在我有一个关于固定元素的问题。如果向下滚动，则只有白色内容区域会滚动。菜单，顶部区域和侧边栏保持固定。这不是问题。

但是，只要更改浏览器窗口的宽度并使其非常薄，就可以滚动水平以查看“溢出”。

现在，我怎么能实现这与CSS，也许也与jQuery？固定元素从不滚动。在Google Plus上，如果窗口不够宽，他们会这样做。

我的页面是givget.de！所以请让我知道，如果有任何可能做到这一点！

非常感谢。

来源

2012-07-10 daricc

我除了固定的内容与CSS的所有元素。现在，如果向下滚动，则只有内容会移动。我的布局不灵活。它的宽度大约为1100px。目前，水平溢出是隐藏的，因为如果你滚动水平，一切都会分崩离析。 – daricc 2012-07-10 13:57:30

你想要做的是一种响应式设计检查['resposnive设计综述']（http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/ ）。你只需要通过媒体查询或javascript检查窗口的宽度，并修改div的定位CSS属性 – bokonic 2012-07-10 13:57:35

只是为了让你开始，你想要做这样的事情

var minWidth = 1000; 
.... 

$(window).resize(function(e){ 
    if($(window).width() < minWidth){ 
     $('.fixedSidebar').css('position','relative'); // etc 
    } 
});

来源

2012-07-10 14:00:08 bokonic

好吧，但在11“笔记本电脑上我仍然有问题，屏幕无法显示我的内容的全部宽度。它只有1024px！因此，用户应该有可能滚动水平而不破坏我的布局。我希望完整的布局（包括导航，顶部区域等）向左移动，而不仅仅是纵向滚动的内容。 – daricc 2012-07-10 14:05:46

要做这样的事情，你需要在一个较小的，灵活的'''overflow-x'设置为'scroll'的情况下有一个固定宽度的div。例如，如果div的内部div b和div a的宽度被设置为2000像素（比你的11“屏幕大），并设置为左浮动，div b被设置为100％的宽度，并使用overflow-x：scroll，你会得到这种效果。 – bokonic 2012-07-10 14:13:01

听起来不错。我会在晚上测试它！ – daricc 2012-07-10 15:01:23

固定布局滚动水平像Google Plus

回答

相关问题