div is not expanding according to the size of its content

Question

I have a parent div and 3 child divs inside the parent div. Height of both the parent and child div is 100% The child div isn't expanding as per its content. child div has "overflow:hidden" as i dont want scrollbar in the child div. What can I do so that the child div expands as the size of cotent inside it increases.

$(document).ready(function()
{

var focusDivId=14, filesCount=5; var tabid = 'stTab-'+(Math.floor(Math.random()*10000)); $('body').append($('')); $tabs.tabs('add','#'+tabid,label); for(i=0;i'+(i+1)+'');

             }
              $.ajax({
                    async: false,
                    type:  "GET",
                    url  : "00014.html",
                    dataType: "html",
                    success : function(text){
                    //   alert("addedFirst");
                         $('#div_'+(focusDivId)+'_parent').css({display:'block'});
                         $('#div_'+(focusDivId)+'_parent').append('<div id="div_'+(focusDivId)+'_child" style="overflow:hidden;display:block;height:100%;width:100%;"></div>');
                         $("#div_"+(focusDivId)+"_child").append(text);
                         },
                     error: function(text) {
                         alert ("Inside Error Block: Loc 101");
                         return false;
                        }
            });

            $.ajax({
                    async: false,
                    type:  "GET",
                    url  : "00013.html",
                    dataType: "html",
                    success : function(text){
                           $('#div_'+(focusDivId-1)+'_parent').css({display:'block'});
                         $('#div_'+(focusDivId-1)+'_parent').append('<div id="div_'+(focusDivId-1)+'_child" style="overflow:hidden;height:100%;width:100%;"></div>');
                         $("#div_"+(focusDivId-1)+"_child").append(text);

                         },
                     error: function(text) {
                         alert ("Inside Error Block: Loc 101");
                         return false;
                        }
            });

            $.ajax({
                    async: false,
                    type:  "GET",
                    url  : "00015.html",
                    dataType: "html",
                    success : function(text){
                          $('#div_'+(focusDivId+1)+'_parent').css({display:'block'});
                         $('#div_'+(focusDivId+1)+'_parent').append('<div id="div_'+(focusDivId+1)+'_child" style="overflow:hidden;height:100%;width:100%;"></div>');
                         $("#div_"+(focusDivId+1)+"_child").append(text);
                         },
                     error: function(text) {
                         alert ("Inside Error Block: Loc 101");
                         return false;
                        }
            });

});

You might find this useful http://stackoverflow.com/questions/12540436/height-of-parent-div-is-zero-even-if-it-has-child-with-finite-heights — Prashant Singh, Oct 31 '12 at 12:06

Ant · Answer 1 · 2012-10-31T12:04:00.873

0

If you have set the dimensions of a div, overflow: hidden will perform its intended behaviour and clip any content that would lie outside the div.

overflow: auto will display scrollbars

overflow: visible is the default and will cause a div to expand

edited Oct 31 '12 at 12:04

answered Oct 31 '12 at 11:25

Ant

3,877
1
15
14

Height 100% means 100% of the height of the containing element. Which at the top level is the height of the window. – Ant Oct 31 '12 at 11:46

div is not expanding according to the size of its content

1 Answers1