CSS：溢出动态创建的内容

Question

我最初尝试使用这样的布局动态更新元素：

现在，应用程序涉及到一些按钮来更新 Small Content 部分的内容的交互：

按钮点击脚本：

$.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 之间的间距。