Заполнение в нижней части модального портит фиксированный заголовок при прокрутке вниз

Question

Мне бы хотелось, чтобы у моего модала был отступ в нижней части, чтобы при прокрутке при достижении нижней части содержимого оно выглядело так:

вместо этого:

Проблема, с которой я столкнулся, и вы можете видеть это на этих двух рисунках, заключается в том, что когда я пытаюсь реализовать этона моем модале (добавляя отступы внизу модального окна), он в основном прокручивается мимо имеющегося у меня липкого заголовка.

Вот изображение модального окна перед прокруткой:

Это суть того, что у меня есть код.Я не могу заставить его выглядеть именно так, но если добавить padding-bottom:5rem к .modal-content, я получу первую картинку

.modal-background {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(10, 10, 10, .86);
}
.modal-content, .modal-card {
    margin: 0 auto;
    overflow: auto;
    position: relative;
    margin-top: 5rem;
    width: 60rem;
    max-width: 100%;
    max-height: calc(100% - 5rem);
}
.modal {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    align-items: center;
    display: block;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    z-index: 20;
    flex-direction: column;
}
.box{
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    color: #4a4a4a;
    display: block;
    padding: 1.25rem;
}

<div class="modal">
    <div class='modal-background' onclick="clearHash()"></div>
    <div class="modal-content" style="margin-top:5rem;width: 60rem;max-width:100%;max-height:calc(100% - 5rem);">
        <div class="box complete-article-content" id="modalContent" style="padding-bottom: .75rem;">
            <div>
                <h1 class="title is-4 header" >Modal Title</h1>
                <h1 class="title is-5 header" >Modal Subtitle</h1>
                <hr style="margin-bottom: 0rem;"/>
            </div>
            <div style="max-height: calc(100vh - 210px);overflow-y: auto;">
                <div id="modalContents" style="margin-top: 1rem;">
                    
                    <div style="padding-bottom:20rem">
                            <h1>Beginning of Modal Content</h1>
                    </div>
                    
                    <div style="padding-bottom:20rem;padding-top:20rem">
                            <h1>Middle of Modal Content</h1>
                    </div>
                    <div style="padding-top:20rem">
                            <h1>Bottom of Modal Content</h1>
                    </div>
                </div>
        </div>
    </div>
</div>

Answer 1

Если вы не возражаете против использования flexbox, это может помочь вам решить вашу проблему без особой работы:

<div class="modal">
    <div class='modal-background' onclick="clearHash()"></div>
    <div class="modal-content" style="margin-top:5rem;width: 60rem;max-width:100%;max-height:calc(100% - 5rem);">
        <div class="box complete-article-content" id="modalContent" style="padding-bottom: .75rem;">
            <div>
                <h1 class="title is-4 header" >Modal Title</h1>
                <h1 class="title is-5 header" >Modal Subtitle</h1>
                <hr style="margin-bottom: 0rem;"/>
            </div>
            <div style="flex: 1; overflow-y: auto;">
                <div id="modalContents" style="margin-top: 1rem;">

                    <div style="padding-bottom:20rem">
                            <h1>Beginning of Modal Content</h1>
                    </div>

                    <div style="padding-bottom:20rem;padding-top:20rem">
                            <h1>Middle of Modal Content</h1>
                    </div>
                    <div style="padding-top:20rem">
                            <h1>Bottom of Modal Content</h1>
                    </div>
                </div>
        </div>
    </div>
</div>

И CSS:

.modal-background {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(10, 10, 10, .86);
}
.modal-content, .modal-card {
    margin: 0 auto;
    overflow: auto;
    position: relative;
    margin-top: 5rem;
    width: 60rem;
    max-width: 100%;
    max-height: calc(100% - 5rem);
  display: flex;
}
.modal {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    align-items: center;
    display: block;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    z-index: 20;
    flex-direction: column;
}
.box{
  flex: 1;
  box-sizing: border-box;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    color: #4a4a4a;
  display: flex;
  flex-direction: column;
    padding: 1.25rem;
  overflow: hidden;
}

Подводя итог: ваша проблема заключается в выборе размеров коробок, которые делают внутреннюю коробку немного больше, чем вы ожидаете. Что в сочетании с overflow: auto; в классе CSS .modal-content приводит к вашему результату.