时间戳

首页 > 解决方案 > 模态高度调整为内容，但模态内容的最大高度变为可滚动

javascript - 模态高度调整为内容，但模态内容的最大高度变为可滚动

问题描述

我有一个模式，其中包含可能包含长内容的选项卡。

我想要做的是让模态在内容高度上调整大小，但是当内容超过模态最大高度 80% 时，内容部分应该变成可滚动的。

目前，它可以在内容变得太大时滚动。但问题是现在 modal__content 容器无论内容如何都保持 100% 的高度。如果我从 modal__content 中删除高度，则内容滚动不再有效。

希望这是有道理的

    <div class="modal">
        <div class="modal__container">
            <div class="modal__content">
                <div class="modal__left"></div>
                <div class="modal__right>lorem 200 </div>
            </div>
        </div>
    <div>

    <div class="modal-overlay"></div>

CSS

    html, body {
        height: 100%;
    }

    *, ::after, ::before {
        box-sizing: border-box;
    }

    .modal {
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        position: fixed;
        left: 0;
        top: 0;
    }

    .modal__container {
        width: 1076px;
        display: flex;
        align-items: center;
        height: calc(100% - 3.5rem);
        margin:1.75rem auto;
    }

    .modal__content {
        background: white;
        display: flex;
        height: 100%;
    }

    .modal__left {
    width: 400px;
    background: #f6f6f6;
    }

    .modal__right {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .modal__inner {
        padding: 2.5rem;
    }

   .modal__body {
        padding: 0 2.5rem;
        height: calc(100% - 5rem);
        overflow-y: scroll;
   }

标签： javascriptcssmodal-dialog

解决方案

尝试添加

overflow-y: scroll;

到 .modal__content

您也可以尝试从

height: calc(100% - 3.5rem);

至

height: 100vh;

推荐阅读