打开模式后，侧边栏变为 "cut"。如何使侧边栏的高度响应？

Question

打开模式后，我的边栏看起来像这样：

我想知道我能做些什么？模态框位于 body 标签之外（因为我模糊了位于 div 中名为 "blur-container2" 的所有内容）。所以除了模态之外的所有东西都位于 "blur-container2".

简化后的结构如下所示：

<html>
<body>
<div class="blur-container2"></div>
</body>
//Modals are here//
</html>

我的body和htmlcss代码：

body, html {
    height: 100%;
    color: black;
}

侧边栏所在的容器：

.blur-container2 {
    background-image: url(http://southernhoopsreport.com/wp-content/uploads/2018/11/156689-download-white-gradient-background-2447x1468-1080p.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover!important;
    background-position: center;
    display: block;
    overflow: auto;
    height: 100%!important;
}

模态 css:

.modal {


   border-radius: 17px;
    background-color: rgb(255, 255, 255)!important;
    backdrop-filter: blur(15px);
    color: rgb(0, 0, 0);
        overflow-y: auto;
    width: 55%;
    max-height: 70%;
    margin: auto;
    padding: 0;
    border-radius: 2px;
    background-color: #fafafa;
    will-change: top,opacity;
}

模型覆盖：

.modal, .modal-overlay {
    position: fixed;
    left: 0;
    display: none;
    right: 0;
}

Answer 1

是的，在 body 之外设置模态框似乎是错误的，但我找到了解决方案。我的问题是 div "blue-container2" 里面有一个我有所有其他东西的 css 值：显示：块。

这就是导致剪切侧边栏出现此问题的原因。当我删除它时 - 侧边栏变成了 "responsive"。

打开模式后，侧边栏变为 "cut"。如何使侧边栏的高度响应？

After opening modal the sidebar gets "cut". How to make the height of the sidebar responsive?

css

sidebar

materialize

responsive-design