0

抱歉，如果上下文已经存在于其他 SO 线程中。我没有找到任何人，所以我发布它。

我在容器（主体）中有两个元素（标签）都溢出了。当我尝试滚动一个标签时，隐藏的标签内容也会滚动。我认为，这是因为这两个元素都绑定到了窗口。

 <div class="header">
    <ul>
      <li data-tabid="tab1" class="tab">Tab1</li>
      <li data-tabid="tab2" class="tab">Tab2</li>
    </ul>
  </div>
    <div class="tabContainer">
       <div class="tab1 tabpanel">
         <!-- overflowing content -->
       </div>
       <div class="tab2 tabpanel">
         <!-- overflowing content -->
       </div>


    </div>

CSS

body{
  height:100%;
  overflow-x:auto;
  }
.header{
  position:fixed;
  top:0px;
  height:50px;
}
.tabpanel{
  position:absolute;
  top:50px;

}

演示

如何防止滚动隐藏元素？

4

2 回答 2

1

这是一个工作演示，解决方案是设置两端固定和滚动内容。这应该像绑定到容器一样产生效果。

.tabpanel{
  position:absolute;
  top:0px;
    bottom:0px;
  display:none;
    min-height:100%;
    height:auto;
    width:100%;
    overflow:auto;
}

.tabpanel .inner{
 width:100%;
height:150%;
margin-top:60px;    
}

http://jsfiddle.net/kongaraju/P6XWH/2/

于 2013-05-31T09:13:16.893 回答
1

基本上，您没有设置标签的高度，也没有对其应用溢出。这样做可以解决问题。

如果您希望标签的高度为 100%，则需要在 div 中包含一个 div。在外部 div 中设置 100% 高度，在内部 div 中设置选项卡选择高度的顶部填充。

像这样：

<div class="tab">
  <div class="inner">
    * tab content *
  </div>
</div>

用 css

.tab { height:100%; }
.inner { margin-top:20px; overflow:auto; }
于 2013-05-31T08:10:55.463 回答