Popup element not scrolling all the way to bottom - html

Question

I'm trying to figure out how to get my element to always scroll to the very end regardless of what the height of the browser is. My ultimate goal is to have a popup which does not show scroll bar, yet you can still scroll if the content exceeds the height of the popup. Lastly, I have an image at the top that needs to be half in and half out of the content (visually). Here is what i have tried:
I would suggest looking at this via the jsfiddle bellow, the result seems to be different here on SO because I have SASS code instead of CSS.
.popup-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 400px;
overflow: hidden;
height: 100%;
max-height: 700px;
z-index: 991;
.popup-logo {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
z-index: 992;
}
.popup-content-wrapper {
position: absolute;
top: 50px;
left: 0;
width: 100%;
max-width: 400px;
overflow: hidden;
height: 100%;
max-height: 650px;
z-index: 991;
padding-top: 70px;
background-color: rgba(255, 255, 255, 0.9);
.popup-content {
width: calc(100% - 40px);
height: 100%;
max-height: 580px;
overflow: auto;
padding: 0 40px 20px 20px;
p {
color: #000;
}
}
}
}
<div class="popup-wrapper">
<img class="popup-logo" src="http://www.clker.com/cliparts/A/x/R/m/4/2/black-white-ying-yang-th.png" asp-append-version="true" />
<div class="popup-content-wrapper">
<div class="popup-content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
Here is a jsfiddle: https://jsfiddle.net/ac1nb9qj/
As you can see in the example above, if the screen is longer than the popup than there is no issue, however if the screen height is less than the popup height, the popup doesn't quite scroll to the end of the content, some content is cut off at the bottom.
NOTE: This is using SASS (SCSS) and not regular CSS.
EDIT: To clarify, I have already achieved my scrollbar not showing, my only problem here is when I add padding to the top to put my image in, my scrolling no longer goes to the bottom. This is what I'm trying to fix. So the suggested duplicated below is wrong.

Answer 1

The problem is your height: 100%;. With this you say that his height is 100% of the parent height, so if the parent is 500px, is height will also be 500px without taking into account the size of the rest of the elements next to it. In this case your logo is taking some height space, so if your logo is 100px and the text container is 100% parent height (500px), you end with a parent container with size 500px containing two children than sum a total of 600px.
What you want to do is to say that "it is the height of the parent MINUS the logo height", which can be achieved with the calc CSS keyword.
.popup-content-wrapper {
height: calc(100% - 100px);
}
Fiddle: https://jsfiddle.net/y8eg65hL/
Other way is to use flexboxes (my preferred way). I suggest you to learn about them as will make your HTML design really easy for infinite reasons. In this case you can create an element where you say "fill the rest of the parent height, taking into account the size of the rest of the siblings" without effort. The CSS code will be cleaner and you will learn the future of HTML :P