溢出中断:隐藏

Question

我们目前正在努力尝试突破一个隐藏了溢出的div。

我们有一个下拉菜单，当用户输入(在搜索字段中键入'c‘可以看到)时，它会填充建议。此下拉菜单当前隐藏在菜单栏后面，因为它有“溢出隐藏”。

如果我们移除top:100%并将position设置为fixed，我们就可以突破。但我们希望它保持绝对(即对于移动设备)。

在这里创建了一个示例：https://edukarma.com/bootstrap/

下拉建议列表可以在.headerItem.headerSearch .searchField .twitter-typeahead .tt-dropdown-menu中找到。

Answer 1

一种可能的解决方法是将overflow:hidden替换为以下内容：

.navbar .headerItem.headerSearch {
  display: table; /* like overflow, creates new block formatting context */
  margin-left: 180px;
  padding-right: 15px;
  margin-top: 11px;
}

.navbar .headerItem.headerSearch:after {
  /* hack to make the table use all available width */
  content: '. .';
  /* with such big spacing, the 2nd dot will always wrap to the new line,
     making the table-like block use the width of the container
     instead of shrinking to content */
  word-spacing: 99in;
  /* make this helper invisible */
  display: block;
  height: 0;
  overflow: hidden;
}

Answer 2

我遇到了这个问题，它可能非常令人沮丧。然而，在阅读了this article之后，我发现建议的答案相当令人满意。

本质上，您必须指定一个外部父对象(添加一个‘祖父母’标记)显式溢出(未指定溢出)，并将直接父对象指定为overflow:hidden;，而不是将这两个CSS选项直接应用于同一个直接父对象。

提供的示例(为了完整，以防2012年的文章丢失)：

不工作

HTML

<div class="parent">
  <div class="child"></div>
</div>

CSS

.parent {
  position:relative;
  overflow:hidden;
}
.child {
  position:absolute; 
  top:-10px; 
  left:-5px;
}

工作中！(孩子可以自由漫游到任何地方)

HTML

<div class="grand-parent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

CSS

.grand-parent {
  position:relative;
}
.parent {
  overflow:hidden;
}
.child {
  position:absolute; 
  top:-10px; 
  left:-5px;
}

Answer 3

您可以通过将子对象设置为position: absolute来完成此操作。

HTML

<section>
    Parent
    <div>Child</div>
</section>

CSS

section {
  width: 300px;
  height: 300px;
  background: dodgerblue;
  overflow: hidden; /* BOOM */
}

section div {
  position: absolute; /* BOOM */
  left: 100px;
  width: 100px;
  height: 400px;
  background: gold;
}

演示：http://jsbin.com/nukic/2/edit