Popup element not scrolling all the way to bottom

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.

Let me understand this please. So you want to disable scrollbars, but be able to scroll with the mouse wheel or whatever native method? — Jorge Fuentes González, Apr 24 '19 at 15:58
@JorgeFuentesGonzález not disable, more like hide the scrollbar. In the example above I'm doing that by pushing the scrollbar outside of the visible area and then `overflow:hidden` takes care of hiding it. I still want the content to be scrollable if somebody uses scroll mouse of touch on a touch device. — Bagzli, Apr 24 '19 at 15:59
@Bojan here you have https://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page. And on the other hand, if you add "overflow: hidden" then you must add JavaScript to scroll on scroll events, as overflow: hidden will disable native scroll handling. — Jorge Fuentes González, Apr 24 '19 at 16:01
Possible duplicate of [Remove HTML scrollbars but allow mousewheel scrolling](https://stackoverflow.com/questions/3253199/remove-html-scrollbars-but-allow-mousewheel-scrolling) — Jorge Fuentes González, Apr 24 '19 at 16:02
@JorgeFuentesGonzález I don't see how your link helps me. Take a look at nesting of my divs and you will see that the hidden part doesn't actually hides the text. There is a overflow: auto on the child which ensures text is scrolled. — Bagzli, Apr 24 '19 at 16:03
overflow: auto will create scrollbars when needed. If there are not scrollbars is that the div is big enough to fit the content. Then the parent that has overflow: hidden is the one that will show the scrollbars, but you hid them. — Jorge Fuentes González, Apr 24 '19 at 16:04
@JorgeFuentesGonzález this is not a duplicate, I already figured out how to hide my scrollbar. Read my updated question. — Bagzli, Apr 24 '19 at 16:05
Oh, you "hid" the scrollbar on the right. Now I see it. The example you added on stackoverflow snippet is wrong then. — Jorge Fuentes González, Apr 24 '19 at 16:06
@JorgeFuentesGonzález it uses sass and SO doesn't seem to like SASS. I also put a note up there which says to use the JS Fiddle. — Bagzli, Apr 24 '19 at 16:06
Better without the snippet, yep. I don't see the problem in the jsfiddle. When I make the screen big or small and I scroll, I can see the last word inside the window. EDIT: No, sorry. read it wrong. It is cut yep. — Jorge Fuentes González, Apr 24 '19 at 16:08

Jorge Fuentes González · Accepted Answer · 2019-04-24T16:23:09.400

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

Popup element not scrolling all the way to bottom

1 Answers1