Question

很抱歉，如果这是一个副本;我没有发现任何引起同样问题的问题。

这个截图说明了这个问题，具体来自a CSS blog site（它紧挨着文字“为了设置定位上下文”。）我在自己的代码中遇到了同样的问题。 / p>

大约在此图片的一半处，有一条带有长注释的行会强制封闭的div提供水平滚动条（通过overflow: auto设置。）如屏幕截图所示，周围的线条灰色背景不伸展以填充父画布的整个宽度。相反，它们仍固定在父视口的宽度处。（这些背景属于div s，其中包含单独的文本行。）

我在Firefox 3.1和IE8中看到了这一点（无论IE7兼容模式如何。）

是否有任何跨浏览器方法强制这些子div拉伸到画布的整个宽度（或换句话说，将它们的宽度设置为对等体的最大宽度）？我的猜测是“不”，或者该网站的作者会使用它。

_{（来源：outofwhatbox.com）}

编辑：这是一个简单的例子。出于某种原因，滚动条不会在IE中显示，但它确实在Firefox 3.1中显示（并且具有我在其他地方看到的相同行为。）

Note: The CSS shown here is derived from SyntaxHighlighter
(http://alexgorbatchev.com/), released under GPL 3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>sample</title>

<style type="text/css">

.syntaxhighlighter .line.alt1 .content {
    background-color:#FFFFFF !important;
}


.syntaxhighlighter .line .content {
    color:#000000 !important;
    display:block !important;
    font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    font-size: 12pt;
    font-weight: 400;
    color: #000000;
    white-space: nowrap;
}

.syntaxhighlighter .line.alt2 .content {
    background-color:#F0F0F0 !important;
}

.syntaxhighlighter {
    background-color:#E7E5DC !important;
    margin:1em 0 !important;
    padding:1px !important;
    width:497px !important;
    height: auto !important;
}

.line {
    overflow:visible !important;
}

.lines {
    overflow-x:auto !important;
}
 </style>

  </head>
  <body>
<div class="syntaxhighlighter" >
  <div class="lines">
    <div class="line alt1">
      <span class="content">
        <span style="margin-left: 0px ! important;" class="block">
          <code class="plain">this is line 1 </code>
        </span>
      </span>
    </div>
    <div class="line alt2">
      <span class="content">
        <span style="margin-left: 20px ! important;" class="block">
          <code class="plain">this is line 2</code>
        </span>
      </span>
    </div>
    <div class="line alt1">
      <span class="content">
        <span style="margin-left: 40px ! important;" class="block">
          <code class="plain">this is a very very very very very very long line number 3</code>
        </span>
      </span>
    </div>
    <div class="line alt2">
      <span class="content">
        <span style="margin-left: 0px ! important;" class="block">
          <code class="keyword">this is line 4</code>
        </span>
      </span>
    </div>
    <div class="line alt1">
      <span class="content">
        <span style="margin-left: 20px ! important;" class="block">
          <code class="plain">and this is line 5.</code>
        </span>
      </span>
    </div>
  </div>
</div>

更新 2009/05/14：这是我根据下面的brianpeiris's answer部署的脚本。如果有人感兴趣，这里需要进行more detailed description次更改。

// Ensure that each content <span> is sized to fit the width of the scrolling region.
// (When there is no horizontal scrollbar, use the width of the parent.)
fixContentSpans : function() {
    jQuery('.syntaxhighlighter > div.lines').each(function(){
        var container = jQuery(this);
        var scrollWidth = this.scrollWidth;
        var width = jQuery(this).width();
        var contents = container.find('.content');
        jQuery(contents).each(function(){
            var child = jQuery(this);
            var widthAvail = 
                scrollWidth - parseFloat(child.css("margin-left"))  
                - parseFloat(child.css("padding-left"))
                - parseFloat(child.css("padding-right"));
            var borderLeft = parseFloat(child.css("border-left-width"));
            // IE uses names (e.g. "medium") for border widths, resulting in NaN
            // when we parse the value.  Rather than trying to get the numeric
            // value, we'll treat it as 0. This may add a few additional pixels 
            // in the scrolling region, but probably not enough to worry about.
            if (!isNaN(borderLeft)) {
                widthAvail -= borderLeft;
            }
            child.width(widthAvail);
        });
    });
},

Answer 1

如果您不介意jQuery，请在nettuts +网站上的Firebug中运行以下代码来解决问题。

$('.dp-highlighter').each(function(){
  var container = $(this);
  if(this.scrollWidth !== $(this).width()) {
    container.children().each(function(){
      var child = $(this);
      var childPaddingLeft = parseInt(child.css('paddingLeft').slice(0, -2));
      child.width(container.get(0).scrollWidth - childPaddingLeft);
    });
  }
});

编辑：似乎也可以在IE7 / 8中使用。

进一步编辑： 这是修复您提供的代码所需的JavaScript：

$('.syntaxhighlighter > div').each(function(){
  var container = $(this);
  if(this.scrollWidth !== $(this).width()) {
    container.find('.content').each(function(){
      var child = $(this);
      child.width(container.get(0).scrollWidth);
    });
  }
});

演示

我使用JavaScript修复程序在JS Bin上托管了您的代码：http://jsbin.com/axeso

Answer 2

我认为没有办法将div扩展为整个宽度。问题是文本不在div的内部。它溢出了行的div（包含阴影）

一种解决方案是使用表格。使用表格行来保存源代码的每一行。

以下是代码示例。第一个容器使用div，第二个容器使用表。

<style>
    .container {
        width: 300px;
        overflow: auto;
    }
    .lineA {
        height: 20px;
        overflow: visible;
    }
    .lineB {
        height: 20px;
        background-color: #888888;
        overflow: visible;
    }
</style>

<div class="container">
    <div class="lineA">Hello World</div>
    <div class="lineB">Hello World</div>
    <div class="lineA">Hello World</div>
    <div class="lineB">Hello World</div>
    <div class="lineA">Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.</div>
    <div class="lineB">Hello World</div>
</div>

<div class="container">
<table>
    <tr><td class="lineA">Hello World</td></tr>
    <tr><td class="lineB">Hello World</td></tr>
    <tr><td class="lineA">Hello World</td></tr>
    <tr><td class="lineB">Hello World</td></tr>
    <tr><td class="lineA">Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.&nbsp;Really&nbsp;Long&nbsp;Line.</td></tr>
    <tr><td class="lineB">Hello World</td></tr>
</table>
</div>

以下是截图：

alt text http://img354.imageshack.us/img354/9418/csstest.png

Answer 3

刚试过这个，它似乎有效，甚至可以回到ie6。

#wrapper{width:300px; height:100px;border:1px solid black; overflow:auto;position:relative;}
#inner{width:auto;position:absolute;}
.content{white-space:pre;height:20px;width:auto;overflow:show;}
.alt {background:gray;}

<div id="wrapper">
<div id="inner">
    <div class="content">content content content content content content content content content </div>
    <div class="content alt">content content content content content content content content content </div>
</div>
</div>

一个缺点是你必须指定包装器的高度或整个物体垂直折叠。您可以使用javascript来修复此问题（包装器高度=内容div的数量*内容div的高度）。

将div子项扩展为画布的宽度，而不仅仅是视口？

3 个答案:

演示