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

Question

当滚动条可见时,我的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;
 }

Answer 1

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

假设您正在尝试创建一个包含两个250px宽列的收缩包装div.浏览器将其宽度计算为500px,然后计算高度,如果需要滚动条,则它适合那些500px内的滚动条,将可用宽度减少到483px(左右).

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

• 在(可能)显示滚动条的框上添加足够数量的右边距
• width在该框上设置属性或使该框收缩包裹其内容
• 设置max-height为所需的值和overflow-y属性auto以触​​发自动滚动条

此时,盒子将根据需要宽,滚动条(如果可见)将覆盖右侧衬垫; 不干扰宽度.

要显示镶边(边框和填充),您需要创建其他div.

• Demo http://jsfiddle.net/salman/KZLmW/show/
• Code 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;
}

注意:

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

Answer 2

听起来您想要的是overflow:auto;仅在内容需要滚动时才显示滚动条。否则它将隐藏滚动条。

所以你的 div 可能看起来像这样：

<div class="scroll"> 
    <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>

    <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
</div>

和你的CSS：

.scroll {
    overflow-y:auto; /* Only scroll the y axis */
}