突破溢出:隐藏

Question

我们正在努力试图打破隐藏溢出的div.

我们有一个下拉菜单,在用户输入时填写建议(在搜索字段中输入'c'来查看).这个下拉菜单目前隐藏在菜单栏后面,因为它有"溢出隐藏".

如果我们删除top:100%并设置位置,我们就可以突破fixed.但我们希望它保持绝对(即移动设备).

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

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

Answer 1

我遇到了这个问题，这可能非常令人沮丧。然而，在阅读了这篇文章后，我发现建议的答案非常令人满意。

本质上，您必须明确指定一个外部父级（添加“祖父母”标签）position:relative;（未指定溢出）和直接父级，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 2

可能的解决方法是替换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;
}