增加溢出宽度以调整滚动条

当滚动条可见时，我应该使用什么 CSS 来使 div 调整其宽度。

这是场景，我有一个 div 和子元素

<div id="ListHolder"> 
     <ul id="LeftList">
        <li></li>
        <li></li>
        <li></li>
     </ul>

     <ul id="RightList">
        <li></li>
        <li></li>
        <li></li>
     </ul>
</div>

我想在溢出时自动调整滚动条的 div 宽度。意味着当没有滚动条时，它应该像左侧的图像一样，当滚动条变得可见时，它应该自动调整滚动条的宽度。我不想使用 javascript，而是使用纯 CSS 和 HTML。我相信仅使用 CSS 和 HTML 就可以做到这一点。

考虑到上面的 UL 列表，我的 CSS 是这样的

 #ListHolder
 {
     display:inline-block;
 }
 #ListHolder > ul
 {
     width:250px;     //<---Necessary to keep fixed width not percentage
     display:inline-block;
 }
 #ListHolder > ul > li
 {
     display:inline-block;
 }
 #LeftList
 {
     float:left;
 }
 #RightList
 {
     float:right;
 }

元素的内容宽度包括滚动条的宽度，据我所知，您无法对抗这种行为。

假设您正在尝试创建一个包含两个 250px 宽列的收缩包装 div。浏览器将其宽度计算为 500px，然后计算高度，如果需要滚动条，它会将滚动条放入 500px 内，将可用宽度减少到 483px（左右）。

一个棘手的解决方案如下：

• 在（可以）显示滚动条的框上添加足够量的右填充
• Set width该盒子上的属性或使该盒子收缩包裹其内容
• Set max-height到期望值和overflow-y财产给auto触发自动滚动条

此时，该框的宽度将达到所需的宽度，并且滚动条（如果可见）将绘制在右侧填充之上；不影响宽度。

为了显示镶边（边框和填充），您需要创建额外的 div。

• Demo http://jsfiddle.net/salman/KZLmW/show/ http://jsfiddle.net/salman/KZLmW/show/
• Code http://jsfiddle.net/salman/KZLmW/ http://jsfiddle.net/salman/KZLmW/

HTML 标记：

<div id="ListBorder">
    <div id="ListOverflow">
        <div id="ListHolder">
            <ul id="LeftList">
                <li></li><li></li><li></li>
            </ul>
            <ul id="RightList">
                <li></li><li></li><li></li>
            </ul>
        </div>
    </div>
</div>

CSS（仅重要部分）

#ListHolder ul {
    float: left;
    width: 250px;
}
#ListHolder {
    width: 500px;
    overflow: hidden;
}
#ListOverflow {
    width: 500px;
    overflow: auto;
    max-height: 350px;
    padding-right: 20px;
}
#ListBorder {
    width: 500px;
    border: 1px solid;
    padding: 20px;
}

Note:

• #ListHolder用于清除修复
• #ListBorder可用于添加边框和填充以匹配所需的输出