块溢出：自动退出父级内联块

http://jsfiddle.net/k88bqjnj/7/块溢出：自动退出父级内联块

我正在尝试创建一个弹出窗口。的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>

的事情是C3块超出C2的时候，我希望它达到的C2的下边框变得滚动。

我需要c2块的大小取决于浏览器的窗口大小，并保持头顶。最好的解决方案是将最大高度设置为c3块。

来源

2014-10-07 Leonid Goriachkin

你应该设置一些高度'.c3'格。例如。 http://jsfiddle.net/bhavesh_gangani/k88bqjnj/1/ – 2014-10-07 09:41:28

你也可以应用溢出：自动到.c2，如果你不介意头被滚走 – 2014-10-07 09:43:43

需要

overflow: scroll;

添加到C2的CSS

fiddle

来源

2014-10-07 09:43:02

我需要保持标题在上面 – 2014-10-07 23:47:57

添加高度[.c3][1]

Update Link

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

来源

2014-10-07 09:45:19

您需要将overflow: auto属性添加到您的.c2这一翻译添加到您的兄弟姐妹.c3DEMO

.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 
}

来源

2014-10-07 09:49:29 Benjamin

“溢出：汽车”的作品，如果有约束（宽度或高度）。在你的情况下，你对内容（.c3）而不是容器（.c2）应用了溢出。只需将“overflow：auto”规则移动到容器（.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/

来源

2014-10-08 07:49:17 MoOx

块溢出：自动退出父级内联块

回答

相关问题