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

我不确定这是否是您所要求的，但此代码会在写入字母的同时创建这些背景行。

您可以轻松调整宽度＆＃34;宽度＆＃34;变种

＆＃13;

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>");
	}
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您可以为轴div添加特定的类，我就可以解决它。

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

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

Answer 3

避免典型的文档流程

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

保持在典型的文档流程中

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

3 个答案: