3

我发现如果我放置一个overflow-auto包含其他 div 的 div，那么这些子 div 的宽度只是父级可见部分的宽度，而不是可滚动区域的宽度。

            问题的例子

您可以在http://jsfiddle.net/UdgCE/看到一个示例

有没有办法将可滚动区域的全宽指定为宽度？

4

2 回答 2

1

我不确定这是否理想，它可能不能完全回答或匹配您打算做的事情。

然而，似乎可滚动容器内部的容器表现出与容器拉伸窗口类似的行为。例如，如果您有一个 div，height:100%;它width:100%;会拉伸视口，仅此而已。

考虑到这一点，在搞砸了一段时间后，我发现的唯一纯 CSS 解决方案是将特定的“匹配”像素值设置为您的内部/外部容器。

这里的一个例子...... http://jsfiddle.net/krishollenbeck/UdgCE/27/

HTML

<html>
  <body>
    <div style="overflow:auto" id="container"> 
      <div id="inner-wrap">        
          <div  style="white-space:pre" id="content">
             This is a the text of the first div and it's veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long
          </div>
        </div>
      <div style="background-color:#FFFF00" id="yellow">
        &nbsp;
      </div>
    </div>
  </body>
</html>

CSS

#yellow {
  width:2000px;    
}

#container {
 border:1px solid red;
    width:400px;
}
#content { 
    width:2000px;    
    border:1px solid #333;
}

#inner-wrap {
 width:2000px;   
}
​

这似乎不太理想，但似乎有效。我猜您很可能必须使用 javaScript 来测量可滚动容器的宽度，然后将内部 div 与该尺寸相匹配。

于 2012-09-18T21:42:50.367 回答
0

向包装器 div 添加“clearfix”为我修复了它。这使得包装 div 扩展到文本的宽度。不仅仅是溢出。

http://jsfiddle.net/7a67j/

于 2012-09-18T22:05:36.357 回答