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

时间：2014-02-24 20:58:27

标签： html css css3

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

example picture

我想在滚动条溢出时自动调整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;
 }

12 个答案:

答案 0 :(得分：8)

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

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

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

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

此时盒子将如所希望的那样宽，如果可见，滚动条将覆盖右侧衬垫;不干扰宽度。

要显示镶边（边框和填充），您需要创建其他div。

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用于clear-fix
  • #ListBorder可用于添加边框和填充以匹配所需的输出

答案 1 :(得分：4)

正如其他人所提到的，没有办法只使用CSS来根据滚动条条件调整div的宽度。

您可以找到一种解决方法，例如在固定宽度demo here中包含滚动条的宽度。这很简单，有效，scollbar出现在您的内容右侧，但在滚动条出现时它不会改变容器的宽度。

CSS 无法根据滚动条的存在情况为容器设置条件宽度，如：

  1. 如果我有滚动条给我这个宽度
  2. 如果我没有滚动条，请给我另一个宽度

    3. 因此，为了实现这种确切的行为，您无法使用CSS。

    我编写了这个简单的JS（不需要库，因此它是轻量级的）代码，它可以为您提供所需的行为：

    var div= document.getElementById('ListHolder');
var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;

if (hasVerticalScrollbar > 0) {
    div.style.width = '530px' ;
}

    现在，这仅适用于页面加载。如果在调整窗口大小时也需要此行为，则可以添加：

    window.addEventListener( 'resize', function( event ) {
    var hasVerticalScrollbar= div.scrollHeight>div.clientHeight;
    if (hasVerticalScrollbar > 0) {
        div.style.width = '530px' ;
    }
    else{
        div.style.width = '500px' ;        
    }
}, false );

    <强> DEMO HERE

    请注意独角兽爱好者，我知道四月已接近完成，但演示中有一个晚期的复活节彩蛋

答案 2 :(得分：3)

当纯粹的CSS溢出时，你将无法增加容器的div。

但是，如果你想保持你的实际布局（这里的flexbox模型更合适，正如@AlecMoore所建议的那样），这里只有一个解决方法仅适用于webkit ：使用{{1} } overlay的值。它会显示在您的内容之上，因此它不会向下滑动。

overflow

Here's a demonstration.

或者，您可以调整div，使其略宽，以便滚动条适合需要时使用（demonstration）。

同样，这不是最佳解决方案;如果你的目标是做出反应灵敏的事情，你应该使用相对尺寸单位和/或flex-box model。

请注意独角兽爱好者：我喜欢小猫，但我更喜欢独角兽。我正在使用小猫，因为我想念一个带有可爱独角兽的图像占位符网站...请告诉你是否知道它！

答案 3 :(得分：2)

除了根据垂直滚动条的可见性调整宽度，您可以始终保留右侧滚动条所需的宽度（如果可见）。

padding-right: 2em;

答案 4 :(得分：1)

这是你要找的吗？

<强> http://jsfiddle.net/Z2WuJ/2/

将图片或您放入的任何内容放在最大宽度为50％（两列）并将框大小设置为边框时，您应该得到所需的结果：

#ListHolder ul {
    margin: 0;
    padding: 10px;
    list-style: none;
    float: left;
    max-width: 50%;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

答案 5 :(得分：1)

解决方案实际上很简单。

您需要一个包含display: inline-block的包装元素。然后设置子元素的宽度。

＆＃13;
＆＃13; 
var count = 20;
var interval = setInterval(function(){
  document.getElementById('inner').innerHTML += '<p>another line</p>';
    if( --count === 0 )
    clearInterval(interval);
}, 250);
＆＃13; 
/* important stuff */

#outer {
  display: inline-block;
  height: 150px;
  overflow-y: auto;
}

#inner {
  width: 300px;
}


/* styling */

p {
  margin: 0;
  padding: 20px;
  background: white;
}

#outer {
  padding: 20px;
  outline: 2px solid red;
  background: #ccc;
}

#inner {
  outline: 2px solid red;
}
＆＃13; 
<div id="outer">
  <div id="inner">
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

你想要的是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 */
}

答案 7 :(得分：0)

我认为你应该考虑滚动条的宽度来考虑div宽度。可以在div宽度上添加几个像素（30px）。然后将RighList和LeftList宽度设置为每个49％。

overflow-y：auto会导致列表移动，因为您没有考虑滚动条宽度。

希望这有帮助！

答案 8 :(得分：0)

我认为你的最佳镜头是即使没有溢出也会始终显示滚动条（滚动条将被停用，并且当页面内容比视口长时将被激活）。

您可以使用以下代码实现此目的：

html {
    overflow: -moz-scrollbars-vertical; /* For FF */
    -ms-overflow-y: scroll; /* For IE */
    overflow-y: scroll; /* For others & old IE */
}

这是一个有效的 FIDDLE

或者，如果您可以为容器div设置固定宽度，则可以通过将overflow-y值设置为overlay来忽略滚动条的宽度，这将使内容位于较小视口的滚动条后面

请注意：不推荐overflow:overlay;。

你走了：

html {
    overflow-y: overlay;
}
#ListHolder {
    display:inline-block;
    width:600px;              /* Fixed width */
}

这是另一个 FIDDLE

请注意，这两种方法都适用于现代和旧版浏览器，例如优秀的IE8。

希望这有帮助。

答案 9 :(得分：0)

即使您可以将DIV宽度调整为滚动条的存在，我也不推荐它。考虑用户可以在他们的操作系统中自定义滚动条的大小（宽度）（Windows会想到）。

接下来，有些浏览器报告视口的宽度带有滚动条，而其他浏览器报告没有。具体来说，Chrome和Safari 排除滚动条尺寸，而Firefox，Opera和IE 包含滚动条尺寸。

我的结论是，我同意你应该使用overflow: scroll的其他答案。要么是这样，要么使用javascript来使用自定义滚动条（我认为这是一种过度杀伤）。

阅读材料：

答案 10 :(得分：0)

<强> DEMO

只需查看演示＆amp;检查元素并从“#ListHolder”div中删除高度，您将看到宽度将适应滚动条存在的变化。

如果您正在寻找这个，请告诉我，我将解释其背后的逻辑。

HTML：

<div class="overall-width">
    <div id="ListHolder">
        <ul id="LeftList">
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
        </ul>
        <ul id="RightList">
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
            <li>
                <img src="http://placehold.it/200x200" />
            </li>
            <li>
            <img src="http://placehold.it/200x200" />
            </li>
        </ul>
    </div>
</div>

CSS：

html {
    overflow: -moz-scrollbars-vertical;
    /* For FF */
    -ms-overflow-y: scroll;
    /* For IE */
    overflow-y: scroll;
    /* For others & old IE */
}
#ListHolder {
    display:inline-block;
    height: 610px;
    overflow: auto;
    width: 100%;
    padding: 10px;
}
#ListHolder > ul {
    -moz-box-sizing: border-box;
    -webki-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #CFCFCF;
    border-radius: 3px;
    display: inline-block;
    margin: 0;
    padding: 20px;
    text-align: center;
    width: 250px;
}
#ListHolder > ul > li {
    display:inline-block;
}
#LeftList {
    float:left;
}
#RightList {
    float:right;
}
body{
    height: 100%;
    margin: 0px;
}
.overall-width{
    width: 600px;
}

答案 11 :(得分：-1)

也许你可以改变滚动条。像这样：

::-webkit-scrollbar {
    width: 2em;
    height: 2em
}
::-webkit-scrollbar-button {
    background: #ccc
}
::-webkit-scrollbar-track-piece {
    background: #888
}
::-webkit-scrollbar-thumb {
    background: #eee
}​

另外，您可以找到IE css here

相关问题
最新问题