时间戳

首页 > 解决方案 > 对话框有两个滚动条，但我想要一个

css - 对话框有两个滚动条，但我想要一个

问题描述

我做了一个对话框并给它一个固定的高度。我想保持这个高度，但我有两个滚动条，只有一个可以滚动。

这是我的 HTML 代码：

<div class="modal fade dialog-layout-modal-body" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" #modal>
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content dialog-layout-modal-body">
            <div class="modal-header">
            <h5 class="modal-title">Add new item</h5>
            <button type="button" class="close" (click)="close()" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                <ng-content></ng-content>
            </div>
        </div>
    </div>
</div>

这是css代码：

@media (min-width: 768px) {
    .dialog-layout-modal-body {
      overflow-y: auto;
      max-height: 662px;
    }
}

在此处输入图像描述

如何解决只留下一个滚动条但又保持对话框高度的问题？

标签： cssangulardialogscrollbar

解决方案

如果您的body元素modal-open在模型显示时调用了一个类，则使用下面的 css 隐藏body的滚动条。

body.modal-open {
   height: 100vh;
   overflow-y: hidden;
}

100vh使身体的高度为视口的 100%。更多细节在CSS-Tricks。

推荐阅读