带有垂直滚动条但没有水平滚动条的水平填充答案

【问题标题】：Horizontal padding with vertical scrollbar but no horizontal scrollbar带有垂直滚动条但没有水平滚动条的水平填充
【发布时间】：2016-05-28 10:19:21
【问题描述】：

如何在没有水平滚动条的情况下向具有垂直滚动条（如侧边栏）的内联块 div 添加水平填充？我正在寻找不需要固定宽度的解决方案（仅使用侧边栏内容的宽度）。

我尝试将填充放在内部 div 中，将滚动条放在外部 div 上，以为这样可以为两者腾出空间，但滚动条仍然踩在右侧填充上。

例子：

html, body {
    margin: 0; padding: 0;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
}
#div1 {
    display: inline-block;
    height: 100%;
    overflow-y: auto;
}
#div2 {
    display: inline-block;
    padding: 0 10px;
    height: 100%;
}

<div id='div1'>
  <div id='div2'>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
  </div>
</div>

JSFiddle： https://jsfiddle.net/msxjL52d/2/

【问题讨论】：

标签： css scrollbar

【解决方案1】：

这就是你要找的吗？我添加了宽度：100%；到#div1。您还应该能够使用 width:auto;如果你不想要它 100%。

注意：根据下面的评论 #div1 已更改为具有宽度：自动； padding-right: 1em;

html, body { margin: 0; padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right:0 ; overflow: hidden; }
#div1 { display: inline-block; height: 100%; width: auto; padding-right: 1em; overflow-y: auto; background-color: gray;}
#div2 { display: inline-block; padding: 0 10px; height: 100%; }

<div id='div1'>
  <div id='div2'>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
  </div>
</div>

【讨论】：

抱歉，我需要侧边栏保持收缩包装到其中文本的宽度。在我的情况下，使其 100% 宽度不起作用。不过还是谢谢。
试试上面的。我将其更改为...宽度：自动； padding-right: 1em;

【解决方案2】：

如果有人可以提供一个不那么老套的答案，请提供。

以下工作，至少在 Firefox 中：为滚动条的宽度添加大约 16px 到 padding-right，并将 overflow-x 设置为 hidden。

html, body {
    margin: 0; padding: 0;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
}
#div1 {
    display: inline-block;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
#div2 {
    display: inline-block;
    padding: 0 26px 0 10px;
    height: 100%;
}

<div id='div1'>
  <div id='div2'>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
  </div>
</div>

【讨论】：