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

【问题标题】：Hiding Overflow-x of a fixed position DIV on outer DIVs在外部 DIV 上隐藏固定位置 DIV 的溢出-x
【发布时间】：2014-04-16 15:22:31
【问题描述】：

我有这样的布局：

<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 还需要沿 x 轴保持在 rightPanel 的范围内.我尝试在每个外部 div 上使用 overflow-x: hidden 但由于 position:fixed 在 topPanel 上，它忽略了该属性。

我一直在寻找，我发现最接近的解决方案是使用：

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

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

请看这里的小提琴。请注意溢出到所有 div 容器右侧的“顶部”。

http://jsfiddle.net/3RLYm/

【问题讨论】：

也分享你的 CSS。
唯一应用的 CSS 属性是上面 DIV 的“样式”属性中的那些。在这种情况下，类只不过是一个标识符。
使用jsfiddle 之类的内容和您的问题示例有助于大量可视化它，并节省那些寻找额外时间为您排除故障的人。只是一个提示。
感谢克里斯 W 的建议。我添加了小提琴。向右溢出的“顶部”表示问题。

标签： css html css-position fixed

【解决方案1】：

我认为问题在于您使用的是 position:fixed;当您使用固定定位时，您会将元素从文档的常规流程中取出并将其固定到特定区域。完成此操作后，溢出属性将不再适用。在下面的示例中，我使用“右”和“左”属性来锁定“顶部”div 的两侧并删除“宽度”。显然，您必须调整这些值以适应您的需求，但这是我要走的方向。

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

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

【讨论】：

对，这就是我遇到的问题。正如我已经尝试过的那样，左右调整只会改变溢出。感谢您的洞察力，但我正在寻找解决固定定位问题的解决方法。
如果去掉'width'属性并使用左右定位来确定顶部标题的宽度不会溢出。请参阅我的小提琴链接以说明我的意思。
我明白这一点，但我需要那里的宽度与“dataPanel”宽度相匹配。它们必须具有相同的宽度才能彼此齐平。