我正在尝试制作一个背景为 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。
最佳答案
$(window).resize(function(){
$(".background").css("padding-bottom", $(".bottom-div").height());
});
您需要在每次窗口大小发生变化时触发该函数。
关于javascript - 如何动态设置填充并在不刷新的情况下显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28829474/