Question

我试图制作一个弹出窗口。的CSS：

.c1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1003;
text-align: center;
padding-top: 49px;
}
.c2{
    display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
}
.c3{
    overflow: auto;
}

HTML：

<div class="c1">
    <div class="c2">
        <div>header</div>
        <div class="c3">
            *long text*
        </div>
    </div>
</div>

当我希望它到达c2的底部边界并且变得可滚动时，c3块从c2出来了。

我需要c2块大小来依赖于浏览器窗口大小并保持标题在顶部。最好的解决方案是将max-height设置为c3块。

Answer 1

在[.c3][1]

中添加高度

Update Link

.c3{
    overflow: auto;
    height:180px;
}

Answer 2

你需要添加

overflow: scroll;

到c2＆＃39的CSS

fiddle

Answer 3

您需要将overflow: auto属性添加到.c2内容中，并将其添加到您的兄弟姐妹.c3 DEMO

.c2{
    display: inline-block;
    background: #e9e9e9;
    box-shadow: 2px 2px 2px #000;
    margin: auto;
    padding: 20px;
    max-height: 200px;
    max-width: 90%;
    overflow:auto;  -->> ADDED
}

Answer 4

＆＃34;溢出：自动＆＃34;如果有约束（宽度或高度），则有效。在您的情况下，您已在内容（.c3）上应用溢出而不是容器（.c2）。只需移动＆＃34;溢出：auto＆＃34;容器（.c2）的规则应该符合您的期望。

.c2{
    display: inline-block;
    background: #e9e9e9;
    box-shadow: 2px 2px 2px #000;
    margin: auto;
    padding: 20px;
    max-height: 80%;
    max-width: 90%;

    overflow: auto; /* add me */
}
.c3{
    /* overflow: auto; delete me*/
}

结果为http://jsfiddle.net/vLrjqzcq/

溢出阻止：auto超出父内联块

4 个答案: