Fixed width content irrespective of scrollbar present

问题

I have a DIV on a webpage that has dynamically loaded content. If the content is too long (or the browser window is shrunk by the user), a vertical scrollbar appears on the DIV. And of course the width of the DIV shrinks to accommodate the scroll bar. So far so normal.

Is there a way to reserve a space for the scrollbar so that the width of the content doesnt change irrespective of scroll bar visibility? Ideally just using CSS.

To work in IE8+, and latest Chrome, FF, Safari, Android, OSi

http://jsfiddle.net/spiderplant0/VUhDt/

#content{
    position: absolute;
    left:10px; top:10px; bottom:10px;
    width: 150px;
    background: yellow;
    overflow: auto;
}

回答1:

Not sure is this is exactly what you want, but could you put the div in a container and set the containing div to overflow:auto? eg.

CSS:

#container {
  position: absolute;
  left:10px; top:10px; bottom:10px;
  overflow: auto;
  width: 170px;
  background: blue;
}

#content {
  width: 150px;
  background: yellow;
  overflow: none;
}

HTML:
<div id="container">
  <div id="content">
    Content here
  </div>
</div>

js fiddle example here: http://jsfiddle.net/SC3bg/

回答2:

You actually can use this Javascript code to detect if the div height is "higher" than the clientHeight :

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

And then do whatever you want with this boolean (Edit CSS width according to it ...), I don't know any CSS rule which could responds your need

来源：https://stackoverflow.com/questions/16108319/fixed-width-content-irrespective-of-scrollbar-present

标签

html

css

scrollbar