Question

我有两个div s，第一个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]中的Visual formatting model。一些这些属性的值会导致创建containing block和/或创建stacking context。

所以你有一个父元素，其尺寸如下。

width: 1096px; 
height: 434px;

现在您正在使用

转换该元素

-webkit-transform: rotate(90deg);

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

enter image description here

所以尽管你改变了这样的元素，但是由于你的变换元素的height仍然占据了垂直空间，它确实在视觉上进行了转换，但并没有字面意思......

enter image description here

那么，现在解决方案是什么？在子元素上使用position: absolute;，无论如何，您在父元素上使用position: relative;。

Demo

#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;
}

Test Case

在这里，我正在转换class .transformed transform的元素，所以如果你看到，元素会position: absolute;并且我也在修改原点，但是下一个框不会移动up，因为变换后的元素占据了流中的文字空间，它不会像position: absolute;那样脱离流，但这就是单独的概念。

enter image description here

所以你需要使用div或你的absolute仍然会占用垂直空间，因此你会看到滚动条......

Poopy IE兼容解决方案

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

首先，您正在转换要在父容器中设置的元素，同样，您不需要overflow所以第一个问题是，如果您不需要auto为什么要使用hidden？您可以使用hidden。
如果不是overflow: hidden;到父级，并且您期望在转换后的元素下面放置一些内容，那么将转换后的元素包装在另一个元素中，并将相同的维度设置为{{1并确保将position: absolute;属性移动到此块。 - Demo
如果还不开心？那为什么transform整个元素？仅transform相关图片 - Demo