[英]“transform: translateX(-50%)” with “position: absolute” and “left: 50%” results in scrollbar in Internet Explorer
I want to position a main
container in the middle of the viewport. 我想在视口中间放置一个
main
容器。
The container is absolutely positioned, because I want it to fill up the whole vertical space by using position: absolute;top: 0;bottom: 0
(I know that I could achieve a similar effect by using height:100%
on html, body, main
, but as soon as the content of main
exceeds the full height, the main
container won't stretch at these exact 100%, which is not what I want). 容器是绝对定位的,因为我希望它通过使用
position: absolute;top: 0;bottom: 0
(我知道通过在html, body, main
上使用height:100%
可以达到类似的效果)来填充整个垂直空间html, body, main
,但是一旦main
的内容超过整个高度, main
容器就不会以这些确切的100%拉伸,这不是我想要的。
So to position the absolutely positioned main
container in the middle of the viewport, I rely on transform: translateX(-50%)
, which works painlessly - except in Internet Explorer, which adds an unwanted horizontal scrollbar! 因此,要将绝对定位的
main
容器放置在视口的中间,我需要依靠transform: translateX(-50%)
,它工作起来很轻松-除了在Internet Explorer中,它添加了不需要的水平滚动条!
Take a look at this pen: 看一下这支笔:
http://codepen.io/jmuheim/pen/wCzcr http://codepen.io/jmuheim/pen/wCzcr
Is there any way to prevent the horizontal scrollbar? 有什么方法可以防止水平滚动条?
overflow-y: none
doesn't seem to work. overflow-y: none
似乎没有工作。
I faced the same issue some days ago. 我几天前也遇到过同样的问题。 It appears that it's a bug and the easier way to fix it, it's to position your element from the
right
instead of the left
. 看来这是一个错误,而且更容易修复,它是
right
而不是left
元素。
To use your example, the result will be : 以您的示例为例,结果将是:
main {
position: absolute;
top: 0;
right: 50%;
bottom: 0;
width: 50%;
background-color: red;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
You can try it live there : https://jsfiddle.net/julienvanderkluft/3udza0te/ 您可以在此处试用: https : //jsfiddle.net/julienvanderkluft/3udza0te/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.