45

我的 CSS 看起来像这样：

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

div 高度和宽度自动缩放。高度已经固定了一个最大值：一旦达到这个值，就会出现垂直滚动条。这一切都很好。

现在的问题：
如果出现垂直滚动条，它们会占用大约 10px 的水平空间，因为滚动条将放置在div.
但是，宽度不会自动缩放以允许垂直滚动条用完这些额外的 10 像素。由于添加垂直滚动条之前的水平宽度正好适合内容（正如width:auto设置所预期的那样），div现在还显示水平滚动条 - 以允许丢失 10 个像素。这很愚蠢。

  • 我怎样才能避免这些水平滚动条，而只是自动缩放宽度div以使垂直滚动条适合？

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

4

5 回答 5

26

刚刚想出了一个相当可行的解决方案（至少对于我这个问题的版本）。

我认为问题width: auto在于它的行为类似于width: 100vw; 问题是当垂直滚动条出现时，视口宽度保持不变（尽管有〜10px的滚动条），但可视区域（正如我所说的那样）减少了10px。

显然，按百分比定义宽度是根据这个“可视区域”定义的，因此将代码更改为：

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

应该允许内容正确重新缩放！

ps 您也可以改为添加overflow-x: hidden，这将停止出现水平滚动条，而只是在垂直滚动条出现时从 div 的右侧切掉〜10px。

于 2015-04-27T00:28:17.250 回答
16

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

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

遗憾的是，当不需要垂直滚动时，当然也会显示填充，使我的 div 比它必须的宽一点...：/ 好吧，在我看来，这仍然比不需要的水平滚动条更可取。

于 2012-12-10T14:10:51.710 回答
2

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

于 2019-10-18T11:29:40.323 回答
0

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

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

你有一个元素，比如说一个表格，它使用自动调整大小。如果在添加所有行之前完成自动调整大小，则它不会为垂直滚动条计算足够的空间。添加行后调整大小解决了我的问题——即便如此，我也需要超时

this.http.get('someEndPoint').subscribe(rows => {
  this.rowData = rows;
  setTimeout(()=>{sizeColumnsToFit()}, 50);
});
于 2019-08-27T16:15:07.703 回答
0

即使没有设置固定宽度，也会出现此错误（特定于 Firefox）。

例如，如果您overflow: auto;在灵活的包装器 div ( ) 中有一个可垂直滚动的容器 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 函数 ensureScrollbarWidthPadding 动态添加一个padding-right到可垂直滚动的容器，以确保永远不会出现水平滚动条。

于 2019-11-26T11:42:40.660 回答