1

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

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

这是小提琴中的简化版本。

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? */
}
4

1 回答 1

0

这是你的小提琴代码

小提琴

这是修改后的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-inner、overlay-content的高度和宽度

于 2013-09-27T07:55:27.300 回答