儿童在改变时没有正确调整大小

时间:2015-09-03 07:21:19

标签: javascript jquery html css

我正在使用三个这样的div标签

<div id="main">
    <div id="content">
        <div id='sub'>
            Child div
        </div>
    </div>
</div>

CSS

#main
{
    width:auto;
    height:auto;
    margin-left:-100px;
}
#content{
    width:auto;
    height:auto;
    border:5px solid blue;
}
#sub
{
 width:100%;
 height:100%;
border:1px solid red;
}

所以我保持一切自动。但即使我调整大小或改变主要父母的边缘,最后一个孩子也不适应它。

我不确定可能是什么问题。但是当我在调整大小或边距更改事件时将宽度和高度设置为100%时,它似乎正在适应。

任何人都可以帮助我吗?并且还有在某些事件中检测父div属性的变化吗?

JSFIDDLE

2 个答案:

答案 0 :(得分:4)

试试这个

&#13;
&#13;
 data-type st=some data;
 session["x"]=st;
&#13;
$(document).ready(function() {
  $('#sub').css({
    width: $('#content').width(),
    height: $('#content').height()
  });


  $('button').click(function() {
    $('#main').css('margin-left', '0px');
    $('#sub').css({
      width: $('#content').width(),
      height: $('#content').height()
    });
  });
});
&#13;
#main {
  width: auto;
  height: auto;
  margin-left: -100px;
}
#content {
  width: auto;
  height: auto;
  border: 5px solid blue;
}
#sub {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}
&#13;
&#13;
&#13;

Working Demo

答案 1 :(得分:1)

您正在设置JS的宽度。试试这个。

<div id="main">
    <div id="content">
        <div id='sub'>
            Child div
        </div>
    </div>
</div>
<button>margin0</button>

#main
{
    margin-left:-100px;
}
#content{
    border:5px solid blue;
}
#sub{
    display: block;
    border:1px solid red;
}

$(document).ready(function(){
    $('#sub').css('height',$('#content').height());


$('button').click(function(){
    $('#main').css('margin-left','0px');
});

});



http://developer.android.com/reference/android/hardware/Camera.html