避免当元素在“overflow：hidden”内时被切断。元件 [英] Avoid an Element from being cut off when they are inside a "overflow: hidden" element

问题描述

我使用的是与此网页上所述的相同的高度CSS技巧。

I'm using the equal heights CSS trick as outlined on this page.

直到今天，我需要在其中一个列中添加一个对话框，这是绝对定位，以脱离流。问题是，由于容器上有overflow：hidden，对话框在溢出时被截断。

It was all working fine until today when I need to add a dialogue box inside one of the columns, which is absolutely positioned to take it out of the flow. The problem is that since the container has "overflow: hidden" on it, the dialogue is being cut off when it overflows.

除了在容器外部对话外

这是一个小例子演示我提到的内容。

Here's a small example demonstrating what I've mentioned.

<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 元素中溢出时，顶部被截断。

You see that div#div-b is cut off at the top when it overflows in the div.container element.

推荐答案

不幸的是，你想做的是不可能的，没有在容器元素之外的对话。

Unfortunately what you want to do is impossible without bringing the dialogue outside of the container element.

你最好的打算是使对话元素的兄弟姐妹的容器，并以这种方式定位。

Your best bet is to make the dialog element a sibling of the container and position it that way.

这篇关于避免当元素在“overflow：hidden”内时被切断。元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！