Question

我的CSS看起来像这样：

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

div高度和宽度自动缩放。虽然高度已固定最大值：一旦达到此值，就会出现垂直滚动条。这很有效。

现在问题：
如果出现垂直滚动条，它们会消耗大约10px的水平空间，因为滚动条将放在里面 div。但是，宽度不自动调整，以允许垂直滚动条使用的这些额外的10个像素。由于添加垂直滚动条之前的水平宽度恰好适合内容（正如width:auto设置所预期的那样），div现在也显示水平滚动条 - 到允许缺少10个像素。这太傻了。

如何避免使用这些水平滚动条并仅自动缩放div的宽度以使垂直滚动条适合？

如果可能，我正在寻找一种不依赖于完全禁用水平滚动的解决方案，因为这可能在某些时候需要（即对于某些输入）。

Answer 1

我找到了一个有效但远非完美的解决方案：

我在我的div中添加了padding-right : 15px，以自动增长整个div。现在，如果出现垂直滚动条，它们适合填充，因此水平宽度仍然可以。

遗憾的是，当不需要垂直滚动时，填充当然也显示出来，使得我的div只比它本来要宽一点......：/嗯，在我眼里，这仍然比不需要的水平滚动条更好

Answer 2

刚刚找到了一个非常合理的解决方案（至少对我这个问题的版本而言）。

我认为width: auto的问题在于它的行为与width: 100vw类似;问题是，当垂直滚动条出现时，视口宽度保持不变（尽管~10px滚动条），但可视区域（因为我正在调用它）减少10px。

显然，按百分比定义宽度会根据此“可查看区域”对其进行定义，因此请将代码更改为：

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: 100%;
  overflow: auto;
  ...
}

应该允许内容重新缩放！

P.S。您也可以添加overflow-x: hidden，这将阻止水平滚动条出现，而只是在垂直滚动条出现时从div的右侧切掉~10px。

Answer 3

我的问题在Google上排名第一的搜索结果（类似于OP，但不相同）。

这是看似不必要的水平滚动条的常见情况：

您有一个元素，例如一个表，该表使用自动调整大小。如果在添加所有行之前完成了自动调整大小，那么它将无法为垂直滚动条计算足够的空间。在添加行之后进行调整大小可以解决我的问题-即使那样，我仍然需要超时

this.http.get('someEndPoint').subscribe(rows => {
  this.rowData = rows;
  setTimeout(()=>{sizeColumnsToFit()}, 50);
});

Answer 4

通常设置100vw是问题所在。只需将其删除，您的宽度将为100％，无论如何这就是您想要的。

Answer 5

即使未设置固定宽度，也会发生此错误（特定于Firefox）。

例如，如果在灵活的包装div（overflow: auto;）内有一个可垂直滚动的容器div（display: inline-block;），则在将窗口调整为小于内容可包装的大小时，首先，则水平滚动条将出现在容器div中，只有在此之后，柔性包装div才会增大，或者最终第二个水平滚动条将出现在窗口中。

结果是一个无用的水平滚动条，只能滚动垂直滚动条的宽度：

为了摆脱这个问题，您可以使用此示例中的javascript代码（在Firefox和Chromium中经过测试）：

<!DOCTYPE html>
<html>
<body>
    <style type="text/css">
    .page {height: 200px;width: 400px;overflow: auto;background-color: #ccc;border: 5px solid #000;margin: 5px;}
    .wrapper {display: inline-block;min-width: 100%;margin: 20px;}
    .scroller {overflow: auto;max-height: 100px;background-color: #f00;}
    .content {min-height: 500px;min-width: 400px;background-color: #cfc;}
    </style>
    <div class="page">
        <div class="wrapper">
            <div class="scroller">
                <div class="content">
                    The wrapper-div should expand to fit the scroller content.
                    Reduce the browser window width, and a useless horizontal scrollbar appears.
                </div>
            </div>
        </div>
    </div>
    <div class="page">
        <div class="wrapper">
            <div class="scroller ensure-scrollbar-width-padding">
                <div class="content">
                    But with the javascript-function, this is now fixed.
                    There is no horizontal scrollbar in the wrapper-div.
                </div>
            </div>
        </div>
    </div>
    <script>
    var ensureScrollbarWidthPadding = function(elem)
    {
        if(!parseInt(elem.scrollWidth) || !parseInt(elem.clientWidth) || !parseInt(elem.offsetWidth))
        {
            return; // no browser-support for this trick
        }

        var update = function()
        {
            // reset to as if not having any right-padding
            elem.style.paddingRight = '0px';

            // check if horizontal scrollbar appeared only because of the vertical scrollbar
            if(elem.scrollWidth !== elem.clientWidth)
            {
                elem.style.paddingRight = (elem.offsetWidth - elem.clientWidth) + 'px';
            }
            else
            {
                elem.style.paddingRight = '0px';
            }
        };

        window.addEventListener('resize', update, false);
        window.addEventListener('load', update, false);

        update();

        return update;
    };

    (function()
    {
        var elems = document.getElementsByClassName('ensure-scrollbar-width-padding');
        for(var i=0;i<elems.length;++i)
        {
            ensureScrollbarWidthPadding(elems[i]);
        }
    })();
    </script>
</body>
</html>

javascript函数sureScrollbarWidthPadding动态向垂直可滚动容器中添加padding-right，以确保水平滚动条永远不会出现。

垂直滚动条通向水平滚动条

5 个答案: