html – 由于滚动条,浏览器和 *** 作系统之间的宽度100％不一致

概述我在我的网站上遇到问题导致UI中断,因为滚动条导致浏览器中各个元素的宽度不同. 基本上我开始想要隐藏滚动条,并且由于似乎没有支持的方式来做,我使用我发现的常见黑客,将1 div添加到我想要滚动的那个,制作outter一个是溢出隐藏的,内部的一个实际上有滚动,但给它一些填充,以便滚动条离开outter div边界并且不显示. 这是一个简单实现的小提琴： https://jsfiddle.net/p4 我在我的网站上遇到问题导致UI中断,因为滚动条导致浏览器中各个元素的宽度不同.

基本上我开始想要隐藏滚动条,并且由于似乎没有支持的方式来做,我使用我发现的常见黑客,将1 div添加到我想要滚动的那个,制作outter一个是溢出隐藏的,内部的一个实际上有滚动,但给它一些填充,以便滚动条离开outter div边界并且不显示.

这是一个简单实现的小提琴：

https://jsfiddle.net/p4pvakaq/1/

HTML：

<div ID="outter">    <div ID="inner">        <div ID="content">            1 <br />            2 <br />            3 <br />            4 <br />            5        </div>    </div></div>

CSS：

#outter {    wIDth: 400px;    height: 200px;    background-color: red;    overflow: hIDden; /* commenting out this line will allow to better understand the Hack */}#inner {    wIDth: 100%;    height: 100%;    background-color: blue;    overflow: auto;    padding-right: 16px;}#content {    wIDth: 100%;    background-color: green;    Font-size: 128px;    text-align: center;}

问题在于,虽然这在某些情况下很有效,即在Mac OS X上使用Chrome或Safari.在启用“平板电脑模式”时,除了Edge之外,它不能在windows上使用任何浏览器(包括Chrome).

我在一些相关场景中有一些行为的截图：

Mac OS – Chrome：

绿色(#content)完全填充内部/外部div.效果很好！

windows – Chrome

我们可以看到绿色(#content)没有填充整个#inner div.

windows(非平板电脑模式) – Edge

问题也存在,虽然可以看到缺失的间距与滚动条的宽度成比例,因为它与Chrome不同.

windows(平板电脑模式) – Edge

效果很好.

所以,根据我的理解,内部div上的宽度100％考虑了滚动条,即使它被移到了侧面.在滚动条覆盖内容并且不占用空间的浏览器上,显然100％将是容器的整个宽度.如果滚动条是推送内容,则100％将是容器宽度减去滚动条宽度.

那么,有没有办法从中获得一致的行为？有没有办法强制滚动条成为叠加而不是推送内容？

解决方法 这适用于Mac firefox Safari Chrome(在Win上未经测试)

#outter {    wIDth: 400px;    height: 200px;    background-color: red;    overflow: hIDden; /* commenting out this line will allow to better understand the Hack */}#inner {    wIDth: 100%;    height: 100%;    background-color: blue;    overflow: auto;    padding-right: 16px;}#content {    wIDth: 100%;    background-color: green;    padding-right:8px;    padding-left:8px;    Font-size: 128px;    text-align: center;}

https://jsfiddle.net/p4pvakaq/7/

总结

以上是内存溢出为你收集整理的html – 由于滚动条,浏览器和 *** 作系统之间的宽度100％不一致全部内容，希望文章能够帮你解决html – 由于滚动条,浏览器和 *** 作系统之间的宽度100％不一致所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。