6
我使用了这个page中概述的等高CSS技巧。避免当元素在“overflow：hidden”元素内时被截断
直到今天，这一切都工作正常，当我需要添加一个对话框内的一列，这是绝对定位，把它从流中。问题是，由于容器上有“溢出：隐藏”，当溢出时对话将被切断。
除了在容器元素外部引入对话之外，是否有任何可能的方式让它通过CSS显示？
下面是一个小例子，演示了我提到过的内容。
<style>
.container { overflow: hidden; margin-top: 30px }
.col {
float: left;
padding-bottom: 2000px;
margin-bottom: -2000px;
border-right: 1px solid black;
width: 100px;
background-color: grey;
}
.col.third { border-right: none }
#div-a { position: relative }
#div-b {
position: absolute;
background-color: red;
width: 35px;
height: 350px;
bottom: 0;
right: 0;
margin: 5px;
border: 2px solid black;
}
</style>
<div class="container">
<div class="col first">
<p style="height: 100px">One</p>
</div>
<div class="col second">
<p style="height: 300px">Two</p>
<div id="div-a">
<!-- this gets cut off by the "overflow: hidden" on div.container -->
<div id="div-b">
Foo
</div>
</div>
</div>
<div class="col third">
<p style="height: 200px">Three</p>
</div>
</div>
你看到div#div-b在顶部时，它在div.container元素溢出切断。