css – 突破溢出:隐藏

前端之家收集整理的这篇文章主要介绍了css – 突破溢出:隐藏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们正在努力试图打破隐藏溢出的div.

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

我们可以突破,如果我们删除顶部:100%并将位置设置为固定.但我们希望它保持绝对(即移动设备).

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

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

解决方法

可能的解决方法是使用以下内容替换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;
}

猜你在找的CSS相关文章