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

Question

i am using three div tags like this

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

so i kept everything auto. But even when i resize or change the margin of main parent the last child not adapting to it.

I am not sure what may be the problem. But when i set width and height as 100% in resize or margin change event it seems adapting.

Can anyone help me out in this? And also is there anyway to detect the parent div attribute changes in some event??

JSFIDDLE

Answer 1

Try This

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div id="main"> <div id="content"> <div id='sub'> Child div </div> </div> </div> <button>margin0</button> 

Working Demo

Answer 2

You are setting the width from JS. Try this.

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

});

JSFiddle