如何将可滚动 Div2 内的 Div1 的宽度动态更改为 Div2 的宽度答案

【问题标题】：How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width如何将可滚动 Div2 内的 Div1 的宽度动态更改为 Div2 的宽度
【发布时间】：2015-04-21 10:23:20
【问题描述】：

如何将可滚动 Div2 内的 Div1 的宽度动态更改为 Div2 的宽度。检查这个 Jsfiddle http://jsfiddle.net/xdKrF/34/ 您将看到绿色背景在 1 点处停止（默认宽度大小）。我想让绿色背景的 div 扩展到整个可滚动的 div。

重要要求，TEXT 不得更改，且必须保留在 1 行中。

有人对此有简单的解决方案吗？我能想到的复杂/hacky 解决方案是可滚动的，宽度为 1000%，当它不可滚动时，它是默认的/100%。使用@media。

HTML

<div id="container" style="overflow:auto">
<div id="content">
    Well hello
</div>
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>

CSS

#content{
white-space:nowrap;
background:green;
}

【问题讨论】：

标签： html css

【解决方案1】：

好的，我找到了解决办法。

包装一个容器并为其申请float:left;。

http://jsfiddle.net/2ugbkb6r/

【讨论】：

我将 float:left 更改为 display:inline-block 因为 div 之外的其他元素以某种方式获得了背景？？？将测试我有空时为什么要为社区做出贡献。
@JaredT 因为float:left; 你可以添加一个带有clear:both 的div 来解决这个问题。喜欢这个：jsfiddle.net/t317hnLn

【解决方案2】：

可能会有更好的答案，但它正在工作。只需将display:table; 添加到#container http://jsfiddle.net/xdKrF/36/

【讨论】：

很好的解决方案。
您将添加 display:table;给父母。在我的变体中，它是#container。在你有 2 个父母：#container 和 #container1 。只需添加 display:table;到#container1
它与其余元素一起滚动...滚动应该只发生在具有绿色背景和 TEXT 垃圾邮件的 div 内。

【解决方案3】：

这里是代码：( JS Fiddle)

#content{
    white-space:nowrap;
    background:green;
}
#container {
    margin: 0 auto;
    width: 90%;
    overflow: auto;
    word-wrap: break-word;    
}

<div id="container">
    <div id="content">
        Well hello
    </div>
    <p>
        TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
    </p>  
</div>

【讨论】：

这将是问题的解决方案，但是如果您想扩展第一个 div 的背景颜色而不是使文本适合屏幕，只需使用固定长度和溢出：隐藏删除多余的文本
额外的文字很重要！并且文本需要在 1 行中。