Question

我正在使用此page中列出的相同高度的CSS技巧。

直到今天我才需要在其中一个列中添加一个对话框，它完全可以将其从流中取出。问题是，由于容器上有“溢出：隐藏”，当对话溢出时对话被切断。

除了将对话框放在容器元素之外，有没有可能通过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在顶部被截断。

Answer 1

不幸的是，如果不将对话框放在容器元素之外，那么你想要做的就是不可能。

最好的办法是让对话框元素成为容器的兄弟，并以此方式定位。

Answer 2

不幸的是没有......我认为没有办法规避溢出：隐藏绝对位置。您可以尝试使用position：fixed，但如果您使用它，则不会在相同的条件下进行定位。

Answer 3

一种选择是将overflow：hidden容器的内容放入子容器（也许是子div）。然后，使子容器与容器的尺寸匹配，并将overflow：hidden从容器移动到子容器。

然后，您可以将对话框设置为容器的子级（子容器的兄弟），现在它将存在于没有溢出的元素中：隐藏。

我没有对此进行测试，并且移除溢出：隐藏在容器中可能会破坏您的设计。如果是这种情况，我建议像其他人一样进行操作，并将对话框完全移出容器。如果你没有选择将对话框的代码放在其他地方，这甚至可以通过Javascript完成。（当你需要它时，Javascript可以使对话框成为BODY或其他标记的子对象）

避免元素在“溢出：隐藏”元素内被切断

3 个答案: