使用CSS3转换后的溢出行为

Question

请查看演示

我有两个divs,第一个div用于显示滚动条,第二个div用于旋转内部内容div.

我的问题是,即使内部内容没有溢出,滚动条也会显示.

请检查演示并告诉我我在这里做错了什么以及如何克服这个问题或任何替代方法来实现这一目标.

HTML

<div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">
    <div id="RotationDiv">
        <img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" />
    </div>
</div>

CSS

#RotationDiv {
    -ms-transform-origin: 539px 539px;
    -webkit-transform-origin: 539px 539px;
    width: 434px;
    height: 1096px;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}

Answer 1

您正在使用transform它,它会更改元素的可视化格式模型.

来自MDN:

CSS转换属性允许您修改CSS可视化格式模型的坐标空间.使用它,可以根据设置的值平移,旋转,缩放和倾斜元素.

来自MDN的一条线:

通过修改坐标空间,CSS转换可以更改受影响内容的位置和形状,而不会中断正常的文档流.本指南介绍了如何使用转换.

来自W3C:2个模块交互

此模块定义了一组CSS属性,这些属性会影响应用这些属性的元素的可视化呈现; 根据[CSS21]中的可视化格式模型调整元素大小和位置后应用这些效果.这些属性的某些值导致创建包含块和/或创建堆叠上下文.

所以你有一个父元素,其尺寸如下.

width: 1096px; 
height: 434px;

现在,您正在使用转换该元素

-webkit-transform: rotate(90deg);

所以在这里,元素在视觉上变换,但不是字面上的变换,换句话说,虽然你变换了一个元素,但它在文档上物理上就像静态元素一样,它只是在视觉上转换元素.我将分享一个图表,让你以更好的方式理解..

因此,虽然你改变了这样的元素,但是由于height你的变换元素仍然占据了垂直空间,这个元素确实在视觉上进行了转换,但不是字面意义......

那么,现在解决方案是什么？使用position: absolute;的子元素,并反正你正在使用position: relative;的父.

演示

#RotationDiv {
    -ms-transform-origin: 539px 539px;
    -webkit-transform-origin: 539px 539px;
    width: 434px;
    height: 1096px;
    position: absolute;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}

让我们有一个测试用例,我的样式如下

.parent .transformed {
    height: 200px;
    width: 200px;
    background: #f00;
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    -moz-transform-origin: 300px 300px;
    -webkit-transform-origin: 300px 300px;
    transform-origin: 300px 300px;
}

.parent .static {
    background: #00f;
    height: 200px;
    width: 200px;
}

测试用例

在这里,我转化具有元素class的.transformed,所以如果你看到,该元素确实transform和我也改变出身,但下一个框不会往上移,作为转换元件占用空间的文字在流动,这不像这样离开流程position: absolute;,但这就是单独的概念.

所以你需要使用position: absolute;或者你的div意志仍然会占用垂直空间,因此你会看到滚动条......

Poopy IE兼容解决方案

正如你评论的那样,是的,IE仍然会显示滚动条,因为定位的元素absolute仍然存在于相同的维度中,那么这里的训练是什么？

• 首先,您正在将元素转换为在父容器中设置,同样,您不需要overflow这样,第一个问题是,如果您不需要overflow为什么使用auto？你可以用hidden.

• 如果不是hidden父节点,并且您期望在变换后的元素下面放置一些内容,那么将变换后的元素包装在另一个具有相同尺寸设置的元素中,overflow: hidden;并确保将position: absolute;属性移动到此块.- 演示

• 如果还不开心？然后为什么transform整个元素？transform仅相关图片 - 演示

Answer 2

这是因为它仍然使用垂直属性(正如hmore009在评论中所说).

如果我们看一下这里你可以看到它在做什么,所以你知道这是真的.

例1:

所以容器的高度和宽度如下:

width: 1096px;
height: 434px;

现在你做了正确的事情并将它们交换为变换#RotationDiv:

width: 434px;
height: 1096px;

如果我们要将容器更改为overflow: hidden;这意味着我们无法看到任何额外的高度,这可以正常工作.

在这里演示

例2:

但我想由于某种原因你不想这样做,可能是因为不知道为什么会造成溢出.所以让我们仔细看看发生了什么.

如果我们从#RotationDiv溢出中删除高度不再存在.那有点连线不是吗？嗯不,高度被用于变换和垂直高度.

在这里演示

那么我们怎么知道造成这个的高度呢？

现在,如果我们给出#RotationDiv与容器相同的高度,我们可以看到没有溢出.

在这里演示

现在,如果我们加上1px那个高度,我们就会把溢出踢进来.嗯,所以高度必然导致这个.即使我们正在改造高度似乎仍然被用于容器中的垂直高度.

在这里演示

我们该如何解决这个问题？

好吧,我们已经看过一个选项,给容器overflow: hidden;或完全删除它.这将停止容器内的滚动.

在这里演示

或者你可以得到一个图像编辑器(有一些免费的在线版)并翻转图像.这样做可以省去很多麻烦.

除此之外,你可以翻转图像只删除#RotationDiv并给出容器background: red;

在这里演示

我怎么做仍然使用变换:

我会取消overflow: auto;,删除不需要的div并设置转换img.

这取决于你想要怎么做,有很多方法.最好的方式我会说它不使用变换,只是使用图像编辑器(例如Photoshop)翻转图像.

在这里演示