1

我创建了一个带有从页面底部向上滑动的浮动/固定面板的网页。在此窗格内是一个子 div，其中包含需要滚动的内容，我已将其设置overflow为scroll，auto但似乎没有一个可以解决问题。应该注意的是，我正在使用 easytabs.js 插件来切换面板内的内容，我相信这可能是它无法按预期工作的原因。

您可以在此处找到该页面的链接

谁能看看并告诉我我做错了什么？

相关的CSS如下

#menu-tab {
    display: block;
    /*background: rgba(255, 255, 255, 0.95);*/
    background: #fff;
    color: #000;
    font-size: 20px;
    padding: 10px 15px;
    margin: 0 auto; 
    width: 250px;
    text-align: center;
    cursor: pointer;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#menu-content {
    display: none;
    /*background: rgba(255, 255, 255, 0.95);*/
    background: #fff;
    color: #111;
    /*padding: 30px 0;*/
    height: 1px;
    /*overflow: hidden;*/
}

/* Styles for Tabs on Side */
#tab-side-container { padding: 50px 0; }
#tab-side-container > ul { list-style: none; margin: 0 40px 0 0; padding: 5px 0; background: #f1f1f1; float: left; }
#tab-side-container > ul li { width: 200px; margin: 0; padding: 0; text-align: right; font-size: 28px; text-transform: uppercase; }
#tab-side-container > ul li a { display: block; padding: 11px 15px; outline: none; color: #000; }
#tab-side-container > ul li a:hover { text-decoration: underline; }
#tab-side-container > ul li.selected-tab { background: rgba(255, 255, 255, 0.95); position: relative; left: 1px; }
#tab-side-container > ul li:first-child.selected-tab { border-top: none; }
#tab-side-container > ul li a.selected-tab { text-decoration: none; }
#tab-side-container .panel-container { padding-top: 5px; padding-left: 240px; }

div.menu {
    overflow: auto;
}
4

9 回答 9

5

只需将您的#menu-content css 溢出更改为自动或滚动即可。

于 2013-10-11T07:17:58.793 回答
2

哥们，我查看你的网站，问题不在 CSS 文件中，问题出在名为 isotope 的 jQuery 插件中，isotope 注入了这段代码：

   overflow: hidden;

作为 .menu 类的样式属性，因此您需要正确配置插件。

您可以尝试，替换此代码：

$container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css'
});

对于此代码：

 $container.isotope({
    itemSelector: '.menu div',
    animationEngine: 'css',
    containerStyle: {
        position: 'relative',
        overflow: 'auto'
    }
});

干杯!

于 2013-10-12T03:07:43.497 回答
1

解决此问题的一种方法是设置 height: 100% for div "tab-side-container"、div "panel-container" 和 div "specials-tab"。您还需要在“specials-tab”上设置“overflow:scroll”。您可能还需要将“specials-tab”子 div 设置为 height:100%。

这在 Chrome 中对我有用。

于 2013-10-08T00:47:36.383 回答
0

基本上，div 的内容必须超过 div 的大小才能使 overflow:scroll 起作用。要么让内容更大，要么让 div 更小，看看是否适合你。此外，div 上的“overflow:auto”会将其设置为仅垂直滚动，而“overflow:scroll”会将其设置为垂直和水平滚动。只是一个旁注。

于 2013-10-07T23:47:21.490 回答
0

请添加到您的 css 中的 css 属性

overflow-x: hidden;
overflow-y: scroll;

在此处输入链接描述还从此处检查网站问题

于 2013-10-15T07:11:26.003 回答
0

工作 jsbin：（我在 jsbin 中克隆了您的网站以展示它的工作示例）
http://jsbin.com/eWoXUHe/1

细节：

默认情况下溢出会自动滚动。但是，如果 div 不高于窗口（或包含 div）的高度，则没有可滚动的内容，因此不会滚动。如果您仍然想滚动，那么只需使 div 高于窗口（或包含 div）的高度。

通过查看您的网站，我立即注意到它.specials-tab的高度为 1080 像素。因此，该 div 远远低于页面底部。你需要使这个包含的 div 更小，例如 500px。

使包含 div 的高度更小后，您可以滚动内部内容。您可能还需要添加overflow: scroll到内部 div（一旦您使外部 div 高度变小，它将起作用）。

解决方案：

以下代码将修复您的网站：

.specials-tab, #starters-tab, #specials-tab, #main-dishes-tab, #sides-tab, #sundries-tab, #drinks-tab, #desserts-tab {
  height: 300px !important;
  overflow: scroll !important;
}

笔记：

  • 不要使用!important. 而是height: 300px; overflow: scroll;手动添加到上述每个元素。我放了!important这样你就可以看到它在 jsbin 中工作。
  • 我放了 300px，所以它足够小，你可以看到它工作。但是，您可以将其设为 500 像素或任何您想要的像素。
于 2013-10-17T20:09:19.783 回答
0

尝试这个。# menu -content{overflow:auto}或#menu-content{overflow:scroll}

于 2013-10-17T03:55:47.783 回答
0

只是改变specials-tab height(less then 860px)并specials-tab给予

overflow:scroll;

如果要分别滚动左右 div，也可以将这些属性设置为它的子元素

于 2013-10-14T11:07:16.960 回答
-1

您可以将您的 css 更改为如下所示：

    #parent {
    overflow-y: scroll;
    width: 100%;
    }
    #box1 {
    width: 15%;
    float: left;
    }
    #box2 {
    width: 80%;
    float: right;
    }

我认为这可以实现您的要求。

于 2013-10-17T21:43:28.540 回答