Question

我试图制作一个背景为100％高度的设计，然后在它下面的一个填充区域（外部视图），并在同一背景上显示其他一些内容。

将填充区域固定在高处很容易，但是我使用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%;
}

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

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

jQuery代码：

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

你可以一起挤压窗户，直到填充区域被错误地投入视野，然后再刷新，看看它回到应有的位置。

为什么它会以这种方式运行并且有没有使用jQuery修复？

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

Answer 1

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

每次窗口大小改变时都需要触发该功能。

如何动态设置填充并让它显示而不刷新？

1 个答案: