21

我已经几个月没有做过css了，所以我可能会错过一些简单的东西，但无论解决方案是什么，我都想不通。所以这就是问题所在。

这是我的代码的简化版本：

<div id="wrapper" style="position: fixed; overflow: hidden; height: 100%; width: 200px;">
  <div id="test" style="position: absolute; margin-left: -200px;"></div>
</div>

所以基本上，我需要内部 div 测试在外部 div 包装器之外向左扩展 200px。问题是我的包装溢出：隐藏，它不允许出去。由于我正在使用一些 js 插件，我需要它保持溢出：隐藏。

那么有什么解决方法吗？谢谢

4

5 回答 5

16

唯一的选择是将 div 移到 div 之外overflow:hidden。你不能说隐藏这个 div 中溢出的所有东西——除了这个 div ......让我们做一个例外。

您可以在层次结构中再引入一层，内部 div 是溢出隐藏的，而外部 div 不是。然后将该定位元素放在外部 div 中。一个伪示例是：

<div class="outer">
  <div class="inner" style="overflow: hidden;">
    ....
  </div>

  <div class="abs-positioned">
  </div>
</div>

如果碰巧您在旧 div 上使用 进行了定位overflow:hidden，您可以将该设置移动到outerdiv 中，以便正确定位。

所以简短的回答：没有解决方案可以让你做你想做的事而不改变你的 CSSoverflow:hidden或不改变你的标记。

于 2013-03-15T17:45:38.280 回答
15

Expanding on Piyas De:

an example

Do note, that if the overflow hidden has

position: relative

then it will not work

not working example

于 2013-12-19T00:54:39.723 回答
9

如果遵守以下规则，实际上可以忽略溢出隐藏：

  • 溢出的子元素具有绝对定位
  • 隐藏溢出的父级具有静态定位
  • 添加了具有相对定位的第二个父包装器

HTML

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="overflowed">(Overflowing the wrapper)</div>
  </div>
</div>

CSS

.outer-wrapper {
  position: relative;
}
.wrapper {
  overflow: hidden;
}
.overflowed {
  position: absolute;
}

小提琴 http://jsfiddle.net/vLsmmrz6/

于 2017-10-31T15:09:27.483 回答
3

就像是 -

<div id="textChange" style="overflow:hidden; padding-left:250px;">This is wrapper Div
This is wrapper Div<br/>
This is wrapper Div<br/>
<div id="textChange1" style="position:absolute;left:50; top: 50;">
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
This is inner div but extend 200px to the left<br/>
</div>
This is wrapper Div<br/>
This is wrapper Div<br/>
This is wrapper Div<br/>
</div>

可以解决你的问题。

看看..是否有帮助...

于 2013-03-15T17:52:51.943 回答
-2

这是一个不需要 Javascript 或移动任何东西的修复程序。只需添加一个具有#wrapper 宽度和高度的父包装器。

<div id="parent_wrapper" style="width:200px">
  <div id="wrapper" style="position: absolute; overflow: hidden; height: 100%; width: 300px;">
    <div id="test" style="position: absolute; margin-left:200px;">Test</div>
  </div>
</div>

另请参阅我的实时示例：http: //jsfiddle.net/ovjdqj4o/

于 2014-09-11T13:12:44.587 回答