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

如何在没有水平滚动条的情况下将水平填充添加到具有垂直滚动条（如侧栏）的内嵌块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/

来源

2016-02-16 Chris Middleton

是这样的东西你要找的人？我增加了宽度：100％;到＃div1。你应该也可以使用width：auto;如果你不想100％。

注意：根据以下注释＃div1被改为具有宽度：auto;填充权：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>

来源

2016-02-16 22:44:07

对不起，我需要侧边栏留收缩包装到它里面的文本的宽度。使其100％宽度不适用于我的情况。不过谢谢。 –

尝试以上。我将它改为... width：auto;填充权：1em; –

如果有人可以提供少哈克的回答，请做。

以下工作，至少在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>

来源

2016-02-16 22:56:16

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

回答

相关问题