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

问题描述 投票：0回答：1

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

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

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

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

HTML

<!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>

CSS

html {
    min-height: 100%;
    height: 100%;
}

body{
    min-height: 100%;
    height: 100%;
    background: #7F7F7F;
}

.modalContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 48px;
    padding-bottom: 48px;
    height: calc(100vh - 96px);
    max-height: calc(100vh - 96px);
}

.modalContent{
    height: 100%;
    max-width: 950px;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid rgb(201, 201, 209);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    overflow-y: hidden;
}

.titleBar {
  display: grid;
  grid-template-columns: auto 22px;
  background-color: gray;
  padding: 0 20px 0 17px;
}

.titleBar i {
  color: white;
  font-size: 22px;
  align-self: center;
}

.modalBody{
  display: grid;
  grid-template-columns: 340px auto;
  height: calc(100vh - 18.5%);
}

.modalBody p{
  margin:3px;
}

.modalBody p:nth-child(even){
  background-color: #cccccc;
}

.modalBody p:nth-child(odd){
  background-color: #f2f2f2;
}

.MBLeft{
  border-right: 2px solid gray;
  height: 100%;
}

.MBRight{
  overflow-y: auto;
}

.rightContent{
  padding: 23px 20px 20px;
}

.sectionTop {
  padding: 23px 20px 20px;
  border-bottom: 2px solid gray;
}

.sectionBottom{
  padding: 23px 20px 20px;
  overflow-y: auto;
  height: 55vh;
}

.sectionBottom p{
  padding-bottom: 7px;
}
html css scroll height responsive
1个回答
0
投票

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

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

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

height: calc(100vh - 385px);

我不得不使用385像素值来使其正常工作，但这似乎可以解决问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.