Question

我正在尝试创建一个模态。我希望这个模态使用除了96px的视图高度（顶部和底部48px填充）以外的所有模式。

问题是模态需要在其中有两个可滚动的面板。这是给我带来麻烦的部分。由于模态高度是动态的，因此难以为滚动区域提供响应的高度，并允许所有面板的内容可滚动。

有没有办法让滚动面板具有响应高度，无论视图高度如何，都可以查看所有面板内容？

示例：https://codepen.io/dean-o-saur/pen/OzjQvQ

HTML

slice_y

CSS

<!DOCTYPE html>
<html>
<head>
    <title>Scroll Test</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://use.fontawesome.com/0b7dc70bea.js"></script>
</head>
<body>
    <div class="modalContainer">
        <div class="modalContent">
            <div class="titleBar">
                <p>Title</p>
                <i class="fa fa-times" aria-hidden="true"></i>
            </div>
            <div class="modalBody">
                <div class="MBLeft">
                    <div class="sectionTop">
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                    </div>
                    <div class="sectionBottom">
                        <p><strong>TOP</strong></p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p><strong>BOTTOM</strong></p>
                    </div>
                </div>
                <div class="MBRight">
                    <div class="rightContent">
                        <p><strong>TOP</strong></p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p>TEST</p>
                        <p><strong>BOTTOM</strong></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

好吧，我玩弄了这个并找到了一个我很满意的解决方案。我更新了问题中链接的CodePen。

看起来我试图滚动的面板需要一个高度。出于某种原因，我的工作是假设面板的父div是需要高度的那些。

同样格式化高度样式有助于：

height: calc(100vh - 385px);

我必须使用385像素值才能使其正常工作，但这似乎可以解决问题。

带滚动面板的动态高度模态

1 个答案: