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

Question

我正在尝试制作一个背景为 100% 高度的设计，然后在其下方(外部 View )填充区域，并在同一背景上添加一些其他内容。

固定填充区域的高度很容易，但我使用的是 Bootstrap 的 col-sm-4 div，其中包含文本，因此当您调整窗口大小时，它们的宽度会减小并且高度增加(因为文本必须适合)，然后在一个点后折叠成三个 div 的堆栈。

这是 jsfiddle ，以及代码:

HTML:

<div class="background">
<div class="bottom-div">
    <div class="col-sm-4"> ... Some filler text ...</div>
    <div class="col-sm-4"> ... Some filler text ...</div>
    <div class="col-sm-4"> ... Some filler text ...</div>
</div>
</div>

CSS:

.background {
  box-sizing: content-box;
  background: url('http://www.mixflavour.com/wp-content/uploads/2014/11/Nature-Wallpaper-03.jpg');
  position: relative;
  height: 100%;
}

body, html {
  height: 100%;
}

.bottom-div {
  position: absolute; 
  bottom: 0;
  background:rgba(0,0,0,0.5);
  width: 100%;
}

我想将 background div 的 padding-bottom 设置为 与 bottom-div 的大小相同.

我决定尝试使用 jQuery 来动态设置填充，而不是通过 css 来操作填充。它运行良好，除了一件事:它仅在每次调整大小后刷新页面后才有效!

jQuery 代码:

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

您可以通过挤压窗口来尝试此操作，直到填充区域被错误地扔进 View ，然后再次刷新以看到它回到应有的位置。

为什么会这样，是否有解决方法，是否使用 jQuery？

编辑:更新了 fiddle ，因为我忘记关闭其中一个 div。

Answer 1

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

您需要在每次窗口大小发生变化时触发该函数。