css - 滚动到底部时，模态底部的填充会弄乱固定标题

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;
}

总而言之:您的问题是盒子的尺寸使内盒比您预期的稍大。这与 CSS 类 .modal-content 中的 overflow: auto; 结合会导致您的结果。