0

I am working on an asp.net web application.

There is a child form of a master page. Master page has not defined any height but it has defined a X px height for the child form.

On the child form it has one fieldset container and within this 2 table container and one container for gridview control.

As per my knowledge I have set the height of #mainOuter_box as auto and height of child form container (#child_contentbox1) as auto too.

but this strategy is not working as desired. However I have tried this one code sample too (which I got from this stackoverflow question thread how to size a div's height to its container height, using CSS? but I have doubt if I have written it properly.

$(document).ready(function(){ $("#mainOuter_box").css('height',$("#child_contentbox1").innerHeight()+$("#child_contentbox2").innerHeight()+$("#child_contentbox3").innerHeight()); });

please suggest me how can I increase the height of #mainOuter_box when, the data/records increase the height of the gridview container box.

Thank you! update here is jsfiddle link, where i have attached css and html of master form. Thanks so much for your kind guidance!! http://jsfiddle.net/nikhilbs09_1/325oes4m/

Community
  • 1
  • 1
Nikhil G
  • 1,536
  • 3
  • 13
  • 28
  • Please show us the html and relevant css. I think you have some sort of float on the inner div, but cannot verify that – jao Sep 09 '14 at 06:12
  • sorry @jao: I am not able to update my question with html and css.. there are formatting related errors at stackoverflow.com :( – Nikhil G Sep 09 '14 at 06:51
  • Hey i have included a link to demonstrate my web page. please have a look on it. Thanks so much!! – Nikhil G Sep 09 '14 at 07:20

1 Answers1

2

"Increase height of outer div when height of child div increases"

You don't need to set any height for the outer div if you want it to resize according to its content, on the other hand, if you have floated elements inside your div, you need to use clear: both, or a .clearfix class for the outer div.

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0px;
    visibility: hidden;
}
Roi
  • 503
  • 1
  • 12
  • 25
  • I have attached the `.clearfix` class in the main div tag of child_contentBox. But still it is not able to increase the height of main_outer div as per the content of child box. Thanks for the response.!! – Nikhil G Sep 09 '14 at 07:04
  • i have followed your suggestion and also gave height to 100% the child div & in this way I have achieved the desired output.. thanks so much!! – Nikhil G Sep 09 '14 at 09:11