CSS：溢出动态创建的内容

Question

我尝试使用如下布局动态更新元素：

现在，该应用程序涉及交互，其中一些按钮用于更新小内容部门的内容：

单击按钮时的

脚本：

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

这样做是在按下按钮，发出请求并将结果动态添加到＃small-content div，但结果是：

如何通过将页脚向下推而不是重叠来解决这个问题呢？请注意，我无法修改页脚的css，因为它是全局呈现的。

Answer 1

我认为如果您在＃small-content之后添加额外的块，并且其大小与#footer相同，那么您将修复您的布局。 但只有当页脚具有固定大小时才会起作用。

像这样的东西

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

和样式

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

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

Answer 2

尝试将margin-top属性添加到#footer。因此，在所有情况下，这将保持＃small-content和#footer之间的间距。