如何仅在需要时显示 Bootstrap 3 弹出框滚动答案

【问题标题】：How to show Bootstrap 3 popover scroll only when needed如何仅在需要时显示 Bootstrap 3 弹出框滚动
【发布时间】：2014-02-22 18:32:25
【问题描述】：

我有这个弹出框，带有滚动条

HTML

<ul class="navbar-nav pull-right"> 
<li><a href="#" data-toggle="popover" title="Notifications" data-html="true" data-content="<a href='?Profile'><div class='pop-text'>Notification 1</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 2</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 3</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 4</div></a><hr /><div><p id='foot-notification-pop'><a href='?notification'>Show all</a></p></div>">Notification</a></li>
</ul>

CSS

.popover-body {
  height: 200px;
  overflow-y: auto;
 }

我只想在需要时显示滚动条，即只有当弹出内容的高度超过 200px 时。当时滚动条始终显示，但在高度小于 200px 时（当然）不可点击。我该怎么做？任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： html css twitter-bootstrap scroll popover

【解决方案1】：

将溢出-y 设置为自动。这将仅在内容超过 200 像素高度时显示滚动。

"overflow-y: auto;"

这应该可行。

【讨论】：

【解决方案2】：

您可以使用 overflow:auto 。在此处阅读有关overflow property 的更多信息

【讨论】：

【解决方案3】：

打开popover后，写一个settimeout，通过css计算popover的高度。

如果高度超过要求，添加

$("popover-content").css("max-height", "200px");
$("popover-content").css("overflow-y", "auto");

这会有所帮助:)

【讨论】：