Question

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

example of the problem

您可以在http://jsfiddle.net/UdgCE/

查看示例

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

Answer 1

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

然而，似乎可滚动容器内的容器表现出与容器拉伸窗口的方式相似的行为。例如，如果你有一个height:100%;和width:100%;的div，它会拉伸视图端口而已。

考虑到这一点，在搞乱了一段时间之后，我发现的唯一纯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与该维度匹配。

有没有办法指定包含div的宽度为父级可滚动区域的整个宽度？

1 个答案: