Question

我在一个动态加载内容的网页上有一个DIV。如果内容太长（或者浏览器窗口被用户缩小），则DIV上会出现垂直滚动条。当然，DIV的宽度会缩小以适应滚动条。到目前为止很正常。

有没有办法为滚动条预留空间，以便内容的宽度不会随滚动条的可见性而变化？理想情况下只使用CSS。

使用IE8 +，以及最新的Chrome，FF，Safari，Android，OSi

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

Answer 1

不确定这是你想要的，但是你可以将div放在容器中并将包含div设置为overflow：auto吗？例如

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>

这里的小提琴示例：http://jsfiddle.net/SC3bg/

Answer 2

您实际上可以使用此Javascript代码来检测div高度是否高于clientHeight：

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

然后用这个布尔做任何你想要的东西（根据它编辑CSS宽度......），我不知道任何可以响应你需要的CSS规则

固定宽度内容，与滚动条无关

2 个答案: