Всплывающий элемент не прокручивается до конца

Question

Я пытаюсь выяснить, как заставить мой элемент всегда прокручиваться до самого конца, независимо от высоты браузера. Моя конечная цель - иметь всплывающее окно, которое не показывает полосу прокрутки, но вы все равно можете прокручивать, если содержание превышает высоту всплывающего окна. Наконец, у меня есть изображение вверху, которое должно быть наполовину и наполовину из содержимого (визуально). Вот что я попробовал:

Я бы посоветовал взглянуть на это с помощью jsfiddle ниже, здесь, на SO, результат кажется другим, потому что вместо CSS у меня есть код SASS.

.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>

Вот jsfiddle: https://jsfiddle.net/ac1nb9qj/

Как видно из приведенного выше примера, если экран длиннее, чем всплывающее окно, то проблем нет, однако, если высота экрана меньше высоты всплывающего окна, всплывающее окно не полностью прокручивается до конца содержание, часть контента обрезается внизу.

ПРИМЕЧАНИЕ. Используется SASS (SCSS), а не обычный CSS.

РЕДАКТИРОВАТЬ: Чтобы уточнить, я уже достиг, что моя полоса прокрутки не отображается, моя единственная проблема здесь в том, что, когда я добавляю отступы сверху, чтобы поместить мое изображение, моя прокрутка больше не идет вниз. Это то, что я пытаюсь исправить. Таким образом, предложенное дублирование ниже неверно.

Answer 1

Проблема ваша height: 100%;.При этом вы говорите, что его высота составляет 100% от высоты родительского элемента, поэтому если родительский элемент равен 500px, высота также будет равна 500px без учета размера остальных элементов рядом с ним.В этом случае ваш логотип занимает некоторое пространство по высоте, поэтому если ваш логотип имеет размер 100px, а текстовый контейнер имеет 100% родительский рост (500px), вы заканчиваете родительским контейнером с размером 500px, содержащим двух дочерних элементов, что в сумме составляет 600px.

То, что вы хотите сделать, это сказать, что «это высота родительского элемента, а НЕ МИНУС высота логотипа», чего можно достичь с помощью ключевого слова calc CSS.

.popup-content-wrapper {
    height: calc(100% - 100px);
}

Fiddle: https://jsfiddle.net/y8eg65hL/

Другой способ - использовать флексбоксы (мой предпочтительный способ).Я предлагаю вам узнать о них, поскольку это сделает ваш HTML-дизайн действительно простым по бесконечным причинам.В этом случае вы можете без труда создать элемент, в котором вы говорите: «заполните оставшуюся родительскую высоту, принимая во внимание размер остальных братьев и сестер».Код CSS будет чище, и вы узнаете будущее HTML: P