One of the features of my website is a post section where users can leave comments. These comments are displayed at the bottom of the post.
To enhance user experience, I decided to create a modal for posts using HTML and CSS as shown below. However, I encountered an issue whereby I want the ability to continue adding comments until a certain height of the entire post is reached, after which a scroll bar should appear.
This is the current HTML setup:
<div class="post-modal hidden">
<span class="remove-modal glyphicon glyphicon-remove btn-sm"></span>
<div class="post"> </div> <!-- This div represents the post -->
</div>
The CSS styling applied:
.post-modal {
position: fixed;
width: 655px;
height: 600px;
right: 0;
top: 75px;
left: 289px;
overflow-y: scroll;
}
However, I am facing an issue with the set height of the container .post-modal. When the total height of my post along with comments is less than the specified height, there is unnecessary empty space at the bottom. Yet, when the combined post and comments exceed this height, the scrollbar functions properly because of the set height and scrolling properties.
I would appreciate any advice or suggestions on how best to achieve this without having extra white space. Thank you!