在父div中插入其他元素后，如何动态更新子div宽度

Question

我有一个主要的div（具有固定的高度，以及scroll-x和scroll-y）：

<div style="position:relative;border:solid 2px #000;overflow-y:scroll;overflow-x:scroll; height:200px; width:100%;" id="pippo">
</div>

和一堆子div在js中动态创建，并以绝对位置插入到父div中：

<div style='z-index:3;position:absolute; top: 50px; left: "+pos+"px;border:solid 1px;'>m</div>

这个div可以在任何地方创建，也可以在父div的高度和宽度之外创建（我不在乎，因为我有滚动条）。

我的问题是：还有其他子div（用js创建）代表像图表一样的背景。 div的边框和宽度为100％。 其中一个示例：

<div style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+yyy+"px;'>0</div>

当javascript动态创建div时，背景不会将其宽度更新为新宽度（如果div超出了父级尺寸）。

因此，如果在右侧滚动，则看不到背景。 动态更改父级宽度时，如何为背景提供正确的宽度（100％）？

http://jsfiddle.net/4x2KP/157/

谢谢大家！

Answer 1

我不确定这是否是您要的内容，但是此代码在编写字母的同时创建了这些背景行。

您可以轻松更改“宽度”变量来对其进行调整。

 var t = 250; $(document).ready(function(){ crea_bg(); setTimeout(function(){ pippo(); }, t); }); var pos = 0; function pippo(){ pos = pos + 30; crea_bg(); $("#pippo").append("<div style='z-index:3;position:absolute; top: 50px;" +" left: "+pos+"px;border:solid 1px;'>m</div>"); setTimeout(function(){ pippo(); }, t); } function crea_bg(){ var yyy = 0; var width = pos + 30; $("#pippo").append("<div style='z-index:2;border-bottom:solid 1px #ccc;" +"color:#ccc;position:absolute;width:"+width+"px;bottom:"+yyy+"px;'>0</div>"); for (i = 25; i <= 300; i=i+25) { $("#pippo").append("<div style='z-index:2;border-bottom:solid 1px #ccc;" +" color:#ccc;position:absolute;width:"+width+"px;bottom:"+(yyy+(-i))+"px;'>"+(-i)+"</div>"); $("#pippo").append("<div style='z-index:2;border-bottom:solid 1px #ccc;" + "color:#ccc;position:absolute;width:"+width+"px;bottom:"+(yyy+(i))+"px;'>"+i+"</div>"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div style="position:relative;border:solid 2px #000;overflow-y:scroll;overflow-x:scroll; height:200px; width:100%;" id="pippo"> </div> 

Answer 2

如果您可以将特定的类添加到轴div，则我已经对其进行了处理。

您可以在#pippo上监听滚动事件并调整轴的偏移量，因为它在#pippo水平固定。 但是您可能必须分开数字部分和轴线部分，以使数字部分可通过滚动条移动。

 var t = 250; var $axis; var offsets; $(document).ready(function(){ crea_bg(); setTimeout(function(){ pippo(); }, t); }); var pos = 0; function pippo(){ pos = pos + 30; $("#pippo").append("<div style='z-index:3;position:absolute; top: 50px; left: "+pos+"px;border:solid 1px;'>m</div>"); setTimeout(function(){ pippo(); }, t); } function crea_bg(){ var yyy = 0; $("#pippo").append("<div class='axis' style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+yyy+"px;'>0</div>"); for (i = 25; i <= 300; i=i+25) { $("#pippo").append("<div class='axis' style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+(yyy+(-i))+"px;'>"+(-i)+"</div>"); $("#pippo").append("<div class='axis' style='z-index:2;border-bottom:solid 1px #ccc; color:#ccc;position:absolute;width:100%;bottom:"+(yyy+(i))+"px;'>"+i+"</div>"); } $axis = $('.axis').css('left', 0); } $('#pippo').scroll(function() { //var currentLeft = parseFloat($axis.css('left')); //console.log($axis.css('left'), currentLeft, $axis.position().left); //$axis.css('left', currentLeft - $axis.position().left); $axis.css('left', '-=' + $axis.position().left); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div style="position:relative;border:solid 2px #000;overflow-y:scroll;overflow-x:scroll; height:200px; width:100%;" id="pippo"> </div> 

Answer 3

避免典型的文档流

如果必须避免典型的文档流程，则需要在<div id="pippo">及其子元素之间插入另一个容器，然后根据需要手动更新新容器的宽度/高度。

保持典型的文档流程

如果您不需要解决正常的文档流程，而只是在寻找任何可能的方法来扩展父级，请结合使用display: inline-block和white-space: nowrap ：

 $(document).ready(function() { setInterval(function() { $('#pippo').append('<div class="childDiv">m</div>') }, 250); }); 

 #pippo { border: solid 2px #000; height: 200px; width: 100%; overflow-y: scroll; overflow-x: scroll; white-space: nowrap; } .childDiv { display: inline-block; border: solid 1px #000; margin: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div id="pippo"></div>