固定宽度的内容与滚动条的存在无关 [英] Fixed width content irrespective of scrollbar present

问题描述

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

有没有办法为滚动条保留一个空间，以便不管滚动条的可见性如何，内容的宽度都不会改变？理想情况下，只需使用CSS。

要在IE8 +，以及最新的Chrome，FF，Safari，Android，OSi中工作 p
$ b

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

  #content {
 position：absolute; 
 left：10px;顶部：10px的;底部：10px的; 
 width：150px; 
背景：黄色; 
溢出：auto; 
 
  

解决方案

你想要什么，但你可以把div放在一个容器中，并将包含的div设置为溢出：auto？例如

  CSS：
 
 #container {
 position：absolute; 
 left：10px;顶部：10px的;底部：10px的; 
溢出：auto; 
 width：170px; 
背景：蓝色; 
} 
 
 #content {
 width：150px; 
背景：黄色; 
溢出：无; 
} 
 
 HTML：
< div id =container> 
< div id =content> 
 Content here 
< / div> 
< / div> 
  

js fiddle示例： http://jsfiddle.net/SC3bg/

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

解决方案

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/

这篇关于固定宽度的内容与滚动条的存在无关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！