Can the scrollbar height be adjusted in this section?
I've tried using overflow-y:auto, but it seems to start from the header and extend all the way to the bottom. When I scroll, the header moves along with it.
- Header needs fixing
- Scrollbar height adjustment needed to only scroll a sub div
HTML:
<div class="notifications-window">
<div class="notifications-header">
<h4>Notifications</h4>
<button type="button"><i class="far fa-window-close close-window"></i></button>
</div>
<div class="notification-details">
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
</div>
</div>
CSS:
.notifications-window {
border: 3px solid rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border-collapse: collapse;
border-radius: 5px;
text-align: center;
width: 350px;
list-style-type: none;
display: inline-block;
}
.notifications-window {
height: 400px;
}
.notifications-window p {
font-size: small;
padding: 5px;
background: rgb(141, 136, 136);
border-radius: 5px;
margin: 5px;
}
.notifications-header h4 {
display: inline-block;
width: 90%;
}