CSS：溢出动态创建的内容

Question

I'm trying to dynamically update elements initially with a layout like this:

Now, the application involves interaction which some button to update the contents of the Small Content division :

script upon button click:

$.ajax({    //some ajax request upon button click
      success: function(result){
      $('#small-content').append(result);
      }
});

What this is doing is upon a button click, a request is made and the results are dynamically added to the #small-content div, but it results to this :

How do I fix this in such a way that it pushes the footer down rather than overlapping it? Note that I cannot in anyway modify the footer's css since it was rendered globally.

Answer 1

I think you will fix your layout if you add additional block after #small-content with the size that the same as #footer. But it will work only if footer has fixed size .

Something like this

<div id="small-content"><!-- some content --></div>
<div id="footer-separator" class="footer-separator"><!-- empty block --></div>
<div id="footer" class="footer"><!-- some content --></div>

And styles

.footer-separator {
   height: 100px; 
   ....
}

.footer {
   height: 100px; 
   ....
}

Answer 2

Try adding the margin-top property to #footer. So this will maintain the spacing between #small-content and #footer in all cases.