Question

我有一个包含主要内容的网页，还有一个可以出现在主要内容上的弹出窗口。弹出窗口将使背景变暗并在其他所有内容上显示弹出内容。我希望弹出窗口具有最大尺寸，以便它可以在边缘周围填充而不占据整个页面。创建弹出窗口时，我希望弹出窗口的一部分具有滚动条如果内容溢出。

当页面缩小时，自动向下面示例中的绿色内容添加滚动条并缩小该绿色内容的大小。

https://jsfiddle.net/maz6L8o0/122/

HTML

<body class="main">
    <div>Main content</div>
    <div class="popup-background">
        <div class="popup-foreground">
            <div class="popup">
                <div class="popup-header">header</div>
                <div class="popup-content">
                    <div class="content">
                        ghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg dfgsgdfgdsf g dfg fdsghgfds ggdf gdfsg df
                    </div>
                </div>
                <div class="popup-footer">footer</div>
            </div>
       </div>
    </div>
</body>

CSS

.main {
    // Represents the main content of the web page
    background: grey;
    height: 100%;
    width: 100%;
}

.popup-background {
    // Represents the background to "darken" the main content
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
  
    .popup-foreground {
        // Represents the popup foreground aka, the maximum space the popup is "allowed" to occupy
        position: absolute;
        height: calc(100% - 120px);
        width: calc(100% - 200px);
        background: rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    
        .popup {   
            // This is the actual popup
            display: flex;
            flex-direction: column;
            background: grey;
            padding: 10px;
          
            .popup-header {
                background: red;
            }
            
            .popup-content {
                background: green;
        
                .content {
                  overflow-y: auto;
                }
            }
            
            .popup-footer {
                background: blue;
            }
        }
    }
}

当您编辑介绍时，可以在 LinkedIn 上找到一个在线工作示例。

Answer 1

你能看看下面的代码吗？希望它对你有用。我们仅将 max-height 添加到 .content div，您可以根据您的要求调整 max-height。

请参考此链接：https://jsfiddle.net/yudizsolutions/gqyfv952/2/

自动将滚动条添加到具有固定位置祖先的div

1 个答案: