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类overflow: auto;中的.modal-content会导致结果。

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

1 个答案: