Please check the demo
请查看演示
I have two div
s the first div
is used for showing the scroll-bar and the second div
is used for the rotation of inner contents of the div
.
我有两个div,第一个div用于显示滚动条,第二个div用于旋转div的内部内容。
My question is why scroll-bar is showing even if there is no overflow of the inner contents.
我的问题是,即使内部内容没有溢出,滚动条也会显示。
Please check the demo and tell me what I am doing wrong here and how to overcome this issue or any alternative way to achieve this.
请检查演示并告诉我这里我做错了什么,以及如何克服这个问题或任何替代方法来实现这一目标。
HTML
HTML
CSS
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;
}
39
You are using transform
so it changes visual formatting model of an element.
您正在使用变换,因此它会更改元素的可视格式化模型。
From MDN:
来自MDN:
The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.
CSS转换属性允许您修改CSS可视化格式模型的坐标空间。使用它,可以根据设置的值平移,旋转,缩放和倾斜元素。
A line again from MDN:
来自MDN的一条线:
By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.
通过修改坐标空间,CSS变换可以更改受影响内容的位置和形状,而不会中断正常的文档流。本指南介绍了如何使用转换。
From W3C : 2 Module Interactions
来自W3C:2个模块交互
This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.
此模块定义了一组CSS属性,这些属性会影响应用这些属性的元素的可视化呈现;根据[CSS21]中的视觉格式化模型调整元素大小和位置后应用这些效果。这些属性的某些值导致创建包含块和/或创建堆叠上下文。
So you have a parent element with the dimensions below.
所以你有一个父元素,其尺寸如下。
width: 1096px;
height: 434px;
Now you are transforming that element using
现在您正在使用转换该元素
-webkit-transform: rotate(90deg);
So here, the element transforms visually, but not literally, in other words though you transform an element, it takes the space physically on a document just like a static element takes, it just visually transforms the element. I will share a diagram which will make you understand in a better way..
所以在这里,元素在视觉上变换,但不是字面上的变换,换句话说,虽然你变换了一个元素,但它在文档上物理上就像静态元素一样,它只是在视觉上转换元素。我将分享一个图表,让你以更好的方式理解..
So though you transformed your element like this, but still the vertical space was taken up because of the height
of your transformed element, which did transformed visually, but not literally...
所以虽然你改变了这样的元素,但是由于你的变换元素的高度仍然占据了垂直空间,它在视觉上有所改变,但不是字面意义......
So, now what's the solution? Use position: absolute;
on the child element, and anyways you are using position: relative;
on the parent.
那么,现在解决方案是什么?使用位置:绝对;在子元素上,无论如何你使用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;
}
Lets have a test case, I've the styles like below
让我们有一个测试用例,我的样式如下
.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
测试用例
Here, I am transforming an element having class
of .transformed
so if you see, the element does transform
and am also modifying the origin, but the next box won't move up, as the transformed element take up literal space in the flow, it doesn't get out of the flow like position: absolute;
does, but well that's the separate concept.
在这里,我正在转换一个具有.transformed类的元素,所以如果你看到,元素确实转换并且还修改了原点,但是下一个框不会向上移动,因为转换后的元素会占用流中的文字空间,它不像位置那样脱离流动:绝对;确实如此,但这是独立的概念。
So you need to use position: absolute;
or your div
will still take up space vertically and thus you see that scroll bar ...
所以你需要使用position:absolute;或者你的div仍然会占据垂直空间,因此你会看到滚动条......
As you commented, well, yes, IE will still show the scroll bar as the element which is positioned absolute
still exists in the same dimensions, so what's the workout here?
正如你评论的那样,是的,IE仍然会显示滚动条,因为绝对位置的元素仍然存在于相同的维度中,那么这里的训练是什么?
Firstly, you are transforming the element to set in the parent container, also, you don't need the overflow
so the first question is if you don't need overflow
than why use auto
? You can use hidden
.
首先,您正在将元素转换为在父容器中设置,同样,您不需要溢出,所以第一个问题是,如果您不需要溢出而不是为什么使用auto?你可以使用隐藏。
If not hidden
to the parent, and you are looking forward to place some content beneath the transformed element, than better you wrap the transformed element inside another element with the same dimensions set to overflow: hidden;
and make sure you move the position: absolute;
property to this block. - Demo
如果没有隐藏到父级,并且您期望在转换后的元素下面放置一些内容,那么将转换后的元素包装在另一个元素中,并将相同的维度设置为overflow:hidden;并确保你移动位置:绝对;这个街区的财产。 - 演示
If still not happy? Then why transform
entire element? transform
relevant image only - Demo
如果还不开心?那为什么要改变整个元素?仅转换相关图像 - 演示
5
This is because it is still using the vertical properties (Just as hmore009 said in the comments).
这是因为它仍然使用垂直属性(正如hmore009在评论中所说)。
If we take a look here you can see what its doing so you know this is true.
如果我们看一下这里你可以看到它在做什么,所以你知道这是真的。
So your height and width for the container are as follows:
所以容器的高度和宽度如下:
width: 1096px;
height: 434px;
Now you have done the right thing and swap them for the transform #RotationDiv
:
现在你已经做了正确的事情并将它们换成#RotationDiv变换:
width: 434px;
height: 1096px;
This works fine if we were to change the container to overflow: hidden;
this means we cant see any extra height.
如果我们要将容器更改为溢出,这可以正常工作:隐藏;这意味着我们无法看到任何额外的高度。
DEMO HERE
在这里演示
But I guess for some reason you don't want to do that, probably due to not knowing why the overflow is caused. So lets take a closer look at what is going on.
但我想由于某种原因你不想这样做,可能是由于不知道为什么会造成溢出。所以让我们仔细看看发生了什么。
If we remove the height from #RotationDiv
the overflow is no longer there. Thats a bit wired isn't it? Well no, the height was was being used for both the transform and the vertical height.
如果我们从#RotationDiv中移除高度,则溢出不再存在。那有点连线不是吗?嗯不,高度被用于变换和垂直高度。
DEMO HERE
在这里演示
Now if we give #RotationDiv
the same height as the container we can see there is no overflow.
现在,如果我们给#RotationDiv提供与容器相同的高度,我们可以看到没有溢出。
DEMO HERE
在这里演示
Now if we add 1px
onto that height we get the overflow kicking in. Hmm, so the height must be causing this. Even tho we are transforming the height seems to still be being used for the vertical height in the container.
现在,如果我们将1px加到那个高度上,我们就会把溢出踢进来。嗯,所以高度必须引起这个。即使我们正在改造高度似乎仍然被用于容器中的垂直高度。
DEMO HERE
在这里演示
Well we already have seen one option, give the container overflow: hidden;
or just removing it altogether. This will stop the scrolling within the container.
好吧,我们已经看过一个选项,让容器溢出:隐藏;或者只是完全删除它。这将停止容器内的滚动。
DEMO HERE
在这里演示
Or you could just get an image editor (there are some free online ones) and flip the image like that. Would save a lot of trouble doing it this way.
或者你可以得到一个图像编辑器(有一些免费的在线版)并翻转图像。这样做可以省去很多麻烦。
Other then that you could flip the image only remove #RotationDiv
and give the container background: red;
除此之外你可以翻转图像只删除#RotationDiv并给出容器背景:红色;
DEMO HERE
在这里演示
How I would do it still using transform:
我怎么做仍然使用变换:
I would take off the overflow: auto;
, remove the unneeded div
and set the transform on the img
.
我将取消溢出:auto;,删除不需要的div并在img上设置转换。
It's up to you how you want to do it, there are many ways. The best way I would say it don't use transform and just flip the image using an image editor (e.g. Photoshop).
这取决于你想要怎么做,有很多方法。我认为最好的方法是不使用变换,只需使用图像编辑器(例如Photoshop)翻转图像。
DEMO HERE
在这里演示
0
well i was having trouble causing overflow too
好吧,我也遇到了导致溢出的问题
my problem was that horizontal scaling made horizontal overflow, so what i did was just change horizontal scaling to vertical scaling and it solved the problem (or bypassed the problem tbh)
我的问题是水平缩放使水平溢出,所以我所做的只是改变水平缩放到垂直缩放,它解决了问题(或绕过了问题tbh)
my understanding to this bug is that since it has no common solution, thus just go around it.
我对这个错误的理解是,因为它没有共同的解决方案,所以只需绕过它。