Bootstrap 3 how to fix content when popover scroll

Question

I have this (simple?) problem: in my page I have one popover, whose element are generated dynamically. How can I fix a div (specifically, the element with id="foot-notification-pop") in the bottom of popover, when it scroll?Below the code. Thanks!

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

One way to do that is with the position: absolute css property

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

Also I moved that id from the paragraph tag to the div tag.

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