垂直滾動條但沒有水平滾動條的水平填充

如何在沒有水平滾動條的情況下將水平填充添加到具有垂直滾動條（如側欄）的內嵌塊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

垂直滾動條但沒有水平滾動條的水平填充

回答

相關問題