Question

我的网站上出现问题导致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之外，它在使用任何浏览器（包括chrome）的Windows上都不起作用。

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

Mac OS - Chrome：

绿色（#content）完全填充内部/外部div。效果很棒！

Windows - Chrome

我们可以看到绿色（#content）没有填满整个#inner div。

Windows（非平板电脑模式） - 边缘

问题也存在，虽然可以看到缺失的间距与滚动条的宽度成正比，因为它与chrome不同。

Windows（平板电脑模式） - 边缘

效果很好。

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

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

Answer 1

这适用于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/

Answer 2

我是提问者。

我能够找到一个特定于我的用例的解决方案，所以我会在这里保留这个答案以供参考，但是等待可能更好的修复。

我的解决方案使用3个div和javascript来调整内容的大小（第3个div），使其具有与outter相同的宽度。

HTML

items

CSS：

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

的JavaScript

#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;
    position: relative;
}

#content {
    position: absolute;
}

#stuff {
    width: 100%;
    background-color: green;

    font-size: 128px;
    text-align: center;
}

http://jsfiddle.net/p4pvakaq/8/

由于滚动条

2 个答案: