Javascript 如何动态设置填充并在不刷新的情况下显示？

我正在尝试做一个背景高度为100%的设计，然后在它下面做一个填充区域（外部视图），在同一背景上有一些其他内容

固定填充区域的高度很容易，但我使用Bootstrap的

col-sm-4

div，其中包含文本，因此当您调整窗口大小时，它们的宽度会减小，高度会增大（因为文本必须适合），然后在一个点折叠成三个div的堆栈之后

下面是代码和代码：

HTML:

我想将

背景

div的

填充底部

设置为与

底部div的大小相同

我决定尝试使用jQuery动态设置填充，而不是通过css操作填充。它工作得很好，除了一件事：它只在每次调整页面大小后刷新页面后工作

jQuery代码：

$(".background").css("padding-bottom", $(".bottom-div").height());

您可以尝试将窗口挤在一起，直到填充区域被错误地抛到视图中，然后再次刷新以看到它回到应该的位置

为什么它会这样做？是否使用jQuery进行了修复

编辑：更新了小提琴，因为我忘了关闭一个div

$(window).resize(function(){
 $(".background").css("padding-bottom", $(".bottom-div").height());
});

---

每次窗口大小更改时，您都需要触发该函数。

Heh，我已经尝试过调整大小功能，但只是刷新页面，但根本无法正常工作，因为它会触发10亿次。这似乎是可行的，尽管有一点警告…通常情况下，用户不会像我们测试网站那样压缩窗口大小。。那不应该是个问题。。。如果存在问题，也可以使用medai查询

$(".background").css("padding-bottom", $(".bottom-div").height());

$(window).resize(function(){
 $(".background").css("padding-bottom", $(".bottom-div").height());
});