Bootstrap 3 如何在彈出滾動時修復內容

Question

我有這個（簡單？）問題：在我的頁面中，我有一個彈出框，其元素是動態生成的。 如何在滾動時修復彈出窗口底部的 div（特別是帶有 id="foot-notification-pop" 的元素）？在代碼下方。 謝謝！

HTML

 $('[data-toggle="popover"]').popover({placement: 'bottom', trigger: 'click' });

 .popover-content { max-height: 200px; overflow-y: scroll; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha512-oBTprMeNEKCnqfuqKd6sbvFzmFQtlXS3e0C/RGFV0hD6QzhHV+ODfaQbAlmY6/q0ubbwlAM/nCJjkrgA3waLzg==" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" integrity="sha512-mG7Xo6XLlQ13JGPQLgLxI7bz8QlErrsE9rYQDRgF+6AlQHm9Tn5bh/vaIKxBmM9mULPC6yizAhEmKyGgNHCIvg==" crossorigin="anonymous" /> <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>

Answer 1

一種方法是使用position: absolute css 屬性

#foot-notification-pop {
    position: absolute;
    bottom: 0px;
    background-color:#fff;
    width:70%
}

此外，我將該 id 從段落標簽移到了 div 標簽。

<div id='foot-notification-pop'><p><a href='?notification'>Show all</a></p></div>