Question

我有这样的布局：

<div class="mainContent" style="overflow-y: scroll !important; width: 100%">
  <div class="leftPanel" style="overflow: hidden; width: 225px;">
  </div>
  <div class="rightPanel" style="overflow: hidden;">
    <div class="dataPanel" style="width:21355px; height:3253px;">
      <div class="topPanel"  style="position:fixed; width:21355px;">
      </div>
      <div class="bottomPanel">
      </div>
    </div>
  </div>
</div>

topPanel需要处于固定位置，以便它不会与mainContent中包含的其余数据垂直（y轴）滚动，但topPanel也需要保持在rightPanel沿x的范围内-轴。我尝试在每个外部div上使用overflow-x：hidden，但由于有位置：在topPanel上修复，它会忽略该属性。

我一直在寻找一段时间，我找到的最接近的解决方案就是使用：

clip: rect(0px 750px 900px 0px);

会切断topPanel沿x轴的溢出，但如果用户向左或向右滚动（他们会这样做），每次都不需要重新调整像一个似是而非的解决方案。

请看这里的小提琴。请注意＆＃34; Top＆＃34;溢出到所有div容器外面的右边。

http://jsfiddle.net/3RLYm/

Answer 1

我认为问题在于你使用的是位置：固定;当您使用固定定位时，您将元素从文档的常规流中取出并将其固定到特定区域。完成此操作后，溢出属性将不再适用。在下面的示例中，我使用了＆＃39;右键＆＃39;并且＆＃39;离开＆＃39;用于锁定＆＃34;顶部＆＃34;的侧面的属性div并删除了＆＃39; width＆＃39;。显然你必须调整这些值以满足你的需求，但这就是我要去的方向。

topPanel
{
position: fixed;
right: 10px;
left: 250px;
border: solid 4px purple;
}

http://jsfiddle.net/3RLYm/35/

在外部DIV上隐藏固定位置DIV的溢出-x

1 个答案: