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

increase width on overflow to adjust scrollbars

提问by

What should be my CSS to make a div adjust its width when scrollbar is visible.

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

Here is the scenario, I have a div and child elements

这是场景，我有一个 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>

I want to adjust my div width automatically for scrollbars when it has overflow. Means when there is no scrollbar it should be like image on left side and when scrollbars becomes visible it should automatically adjust width for scrollbars. I do not want to use javascript but with pure CSS and HTML. And I believe it is possible with CSS and HTML only.

我想在滚动条溢出时自动调整我的 div 宽度。意味着当没有滚动条时，它应该像左侧的图像，当滚动条可见时，它应该自动调整滚动条的宽度。我不想使用 javascript，而是使用纯 CSS 和 HTML。我相信只有 CSS 和 HTML 才有可能。

Considering above UL Lists, my CSS is something like

考虑到上面的 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;
 }

回答by Salman A

The content width of an element includes the width of scrollbar, and as far as I know, you cannot fight this behavior.

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

Suppose you are trying to create a shrink-wrap div that contains two 250px wide columns. The browser calculate its width as 500px, then the height, and if a scrollbar is required, it fits the scrollbar inside those 500px reducing the available width to 483px (or so).

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

A tricky solution is as follows:

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

• Add sufficient amount of right padding on the box that (could) display scrollbar
• Set widthproperty on that box or make that box shrink-wrap around its contents
• Set max-heightto desired value and overflow-yproperty to autoto trigger automatic scrollbar

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

At this point the box will be as wide as desired and the scrollbar, if visible, draws over the right padding; not interfering with the width.

此时，框将与所需宽度一样宽，并且滚动条（如果可见）将绘制在右侧填充上；不干扰宽度。

In order to display the chrome (border and padding) you need to create additional divs.

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

• Demohttp://jsfiddle.net/salman/KZLmW/show/
• Codehttp://jsfiddle.net/salman/KZLmW/

• Demohttp://jsfiddle.net/salman/KZLmW/show/
• Codehttp://jsfiddle.net/salman/KZLmW/

HTML Markup:

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(only the important bits)

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:

笔记：

• #ListHolderis used for clear-fix
• #ListBordercan be used to add a border and padding to match the desired output

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

回答by web-tiki

As other people have mentioned, there is not way to adapt the width of the div based on the scrollbar condition only with CSS.

正如其他人所提到的，仅使用 CSS 无法根据滚动条条件调整 div 的宽度。

You could find a workaround like including the width of the scroll bar in your fixed width demo here. This is simple, effective, scollbar appears right of your content but it doesn't change the width of the container when the scrollbar appears.

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

CSS can't set a conditional widthto the container based on scrollbar presence like :

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

1. if I have a scrollbar give me this width
2. if I don't have a scrollbar, give me this other width

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

So to achieve this exact behaviour you can't use CSS.

因此，要实现这种确切的行为，您不能使用 CSS。

I wrote this simple JS (no library needed so it is lightweight) code that gives you the behaviour you are looking for :

我写了这个简单的 JS（不需要库，所以它是轻量级的）代码，它为您提供了您正在寻找的行为：

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

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

Now, this only works on page load. If you also want this behaviour when the window is resized, you can add :

现在，这只适用于页面加载。如果您在调整窗口大小时也想要这种行为，您可以添加：

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

演示在这里

Note for unicorn lovers, I know april is nearly finished but there is a late easter egg for you in demos

独角兽爱好者的注意事项，我知道四月快结束了，但在演示中有一个迟到的复活节彩蛋

回答by Bigood

You won't be able to increase the container's div when it overflows by pure CSS.

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

However, if you want to keep your actual layout (the flexbox model would be a better fit here, as @AlecMoore suggested), here's a workaround for webkit only: use the overlayvalue for overflow. It'll appear above your content, so it'll not slide down.

不过，如果你想保持你的实际布局（在Flexbox的模式将是一个更适合在这里，因为@AlecMoore建议），这里有一个解决办法只有WebKit的：使用overlay的价值overflow。它会出现在您的内容上方，因此不会向下滑动。

div{
    width: ...px;        /* Fixed width */
    overflow-y: overlay; /* Overlaying scrollbar for y axis */
}

Here's a demonstration.

这是一个演示。

Or, you could just adapt your div, make it slightly wider, so the scrollbar will fit in when needed (demonstration).

或者，您可以调整您的 div，使其稍宽，以便滚动条在需要时适合（演示）。

Again, this is not the best solution ; if you aim to make something responsive, you should be using relative sizing units, and / or flex-box model.

同样，这不是最好的解决方案；如果您的目标是使某些内容具有响应性，则应该使用相对大小单位和/或flex-box 模型。

Note to unicorn lovers: I do love kittens, but I prefer unicorns. I'm using kittens, cause I miss an image placeholder website with cute unicorns... Please tell if you know one!

独角兽爱好者注意事项：我确实喜欢小猫，但我更喜欢独角兽。我正在使用小猫，因为我错过了一个带有可爱独角兽的图像占位符网站...请告诉您是否知道！

回答by ceving

Instead of adjusting the width depending of the visibility of the vertical scroll bar you can always reserve the width the scroll bar needs on the right side if it is visible.

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

padding-right: 2em;

回答by monkapish

The solution is actually pretty simple.

解决方法其实很简单。

You need a wrapper element with display: inline-block. Then set the width of the child element.

您需要一个带有display: inline-block. 然后设置子元素的宽度。

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

/* 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;
}

<div id="outer">
  <div id="inner">
  </div>
</div>

回答by Jos Gerrits

Is this what you're looking for?

这是你要找的吗？

http://jsfiddle.net/Z2WuJ/2/

http://jsfiddle.net/Z2WuJ/2/

Giving the images or whatever content you're putting in there a max-width of 50% (for two columns) and setting the box-sizing to border-box you should get your desired result:

为图像或您放入的任何内容提供 50% 的最大宽度（两列）并将 box-sizing 设置为 border-box 您应该会得到您想要的结果：

#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;
}

回答by Ph0b0x

I think you should make the div width taking in consideration the scrollbar width. Add a few pixels (30px) maybe to the div width. Then set the RighList and LeftList width to something like 49% each.

我认为您应该考虑滚动条宽度来设置 div 宽度。可能在 div 宽度上添加几个像素（30px）。然后将 RightList 和 LeftList 的宽度分别设置为 49%。

overflow-y:auto is causing your list to move because you are not taking the scrollbar width into consideration.

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

Hope this helps!

希望这可以帮助！

回答by Karim AG

I think your best shot would be to always display the scroll bar even when there is no overflow (the scroll bar would be deactivated and will get activated when the content of the page gets longer than the viewport).

我认为你最好的办法是即使没有溢出也总是显示滚动条（滚动条将被停用，当页面内容长于视口时会被激活）。

You can achieve this using this code:

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

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

And here is a working FIDDLE

这是一个可用的 FIDDLE

Alternatively, if you are OK with setting a fixed width to your container div, you can ignore the width of the scroll bar by setting the overflow-y value to overlay which will make the content get behind the scroll bar on smaller viewports.

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

Please Note: that overflow:overlay;is deprecated.

请注意：这overflow:overlay;已被弃用。

Here you go:

干得好：

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

And here is another FIDDLE

这是另一个小提琴

Note that both approaches work correctly on modern AND older browsers such as the great IE8.

请注意，这两种方法都可以在现代和较旧的浏览器（例如出色的 IE8）上正常工作。

Hope this helps.

希望这可以帮助。

回答by Alec Moore

What it sounds like you want is overflow:auto;which will only show the scroll bar when the content needs to scroll. Otherwise it will hide the scroll bar.

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

So your div could look like this:

所以你的 div 可能是这样的：

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

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

and your css:

和你的CSS：

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

回答by Daze

Even if you could adjust your DIVs width to the presence of a scrollbar, I wouldn't recommend it. Consider that a user could have customized the size (width) of their scrollbars within their OS (Windows comes to mind).

即使您可以根据滚动条的存在调整 DIV 宽度，我也不推荐这样做。考虑到用户可以在其操作系统中自定义滚动条的大小（宽度）（想到 Windows）。

Next, comes the fact that some browsers report the viewport's width withthe scrollbar, while others report it without. Specifically, Chrome and Safari excludethe scrollbar dimensions, while Firefox, Opera and IE includethe scrollbar dimensions.

接下来，事实是一些浏览器使用滚动条报告视口的宽度，而其他浏览器报告它没有. 具体来说，Chrome 和 Safari不包括滚动条尺寸，而 Firefox、Opera 和 IE包括滚动条尺寸。

I conclusion, I concur with the other answers that you should use overflow: scroll. Either that, or use javascript to use a custom scrollbar (which I think is overkill).

我的结论是，我同意您应该使用的其他答案overflow: scroll。要么，要么使用 javascript 来使用自定义滚动条（我认为这是矫枉过正）。

Reading material:

阅读材料：

• http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/
• http://www.456bereastreet.com/archive/201301/media_query_width_and_vertical_scrollbars/

• http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/
• http://www.456bereasttreet.com/archive/201301/media_query_width_and_vertical_scrollbars/