javascript - CSS : Overflowing Dynamically Created Content

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 大小相同的 block ，我认为您将修复您的布局。 但它只有在页脚具有固定大小时才有效。

像这样

<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; 
   ....
}