Question

我正在尝试创建一个具有可变高度的垂直居中对话框。我在容器中使用了带有height: 100%和vertical-align:middle的span元素的技术。

现在，对话框上设置了max-height:80%，这样如果容器变小，它就不会占用容器的整个高度。当容器变小时，内容也会变小，但是当发生这种情况时我无法使内容区域变得可滚动。

这是一个小提琴中的simplified version。

HTML：

<div id="main">
    <div id="overlay">
        <span id="mickey-mouse"></span>
        <div id="overlay-inner">
            <div id="overlay-title">Title</div>
            <div id="overlay-content">
                <div id="content">MAKE ME SCROLL!</div>
            </div>
        </div>
    </div>
</div>

CSS：

body, html {
    position: relative;
    width: 100%;
    height: 100%;
    position: relative;
    background: yellow;
    padding: 0;
    margin: 0;
}

#main {
    position: absolute;
    width: 100%;
    height: 100%;    
    top: 0;
    left: 0;
}

#overlay {
    position: aboslute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}

#mickey-mouse {
    display: inline-block;
    height: 100%;
    width: 0;
    margin-right: -0.25em;
    vertical-align: middle;
}

#overlay-inner {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    max-height: 80%;
    max-width: 300px;
    width: 80%;
    background: white;
    overflow: hidden;
}

#overlay-title {
    padding: 1em;
    height: 14px;
    background: #eee;
}

#overlay-content {
    padding: 1em;
    /* HOW TO MAKE THIS SCROLLABLE? */
}

Answer 1

这是你的小提琴代码

fiddle

这是修改过的css

    body, html {
    position: relative;
    width: 100%;
    height: 100%;
    position: relative;
    background: yellow;
    padding: 0;
    margin: 0;
}

#main {
    position: absolute;
    width: 100%;
    height: 100%;    
    top: 0;
    left: 0;
}

#overlay {
    position: aboslute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}

#mickey-mouse {
    display: inline-block;
    height: 100%;
    width: 0;
    margin-right: -0.25em;
    vertical-align: middle;
}

#overlay-inner {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    max-height: 90%;
height: 90%;
    max-width: 300px;
    width: 80%;
    background: white;
    overflow: hidden;
}

#overlay-title {
    padding: 1em;
    height: 5%;
    background: #eee;
    }

#overlay-content {
    padding: 1em;
max-height: 80%;
    overflow:auto;
    }

请尝试让我知道

编辑：

已经做了三件事。

为内容div添加了溢出可见内容。为overlay-content添加了overflow-auto

并以百分比

设置overlay-inner，overlay-content的高度和宽度

可变高度对话框，最大高度可滚动内容

HTML：

CSS：

1 个答案: