javascript - 强制 div 高度为最接近背景图像高度的倍数

Question

解释起来有点棘手。基本上，我试图在我的网站的内容 div 下放置的整体图像是一个杂乱的盒子，边框脏兮兮的，可以 flex 进出。

到目前为止我得到的是这样的(删除了不相关的代码)

<div class="content-top"><img src="content-top.png"></div>
<div id="content"> <!-- WORDPRESS LOADS CONTENT HERE --> </div>
<div class="content-bottom"><img src="content-bottom.png"></div>

CSS:
#content {
  background: url("assets/images/content-bg.png") repeat-y scroll 0 0 transparent;
}

content-bg.png 图像高 300 像素，是一个可重复的图像，在两侧创建图案边框。

问题是 content-bottom.png 图像只有放在这些 300 像素图 block 之一的末尾时才看起来正确。如果页面内容的高度导致仅显示最后一个背景图 block 的一半，则线条不匹配。

输入这个我怀疑答案是否在 CSS 中，而是我需要一个 javascript/jquery 解决方案，但至于如何做的细节我不确定。

Answer 1

这是您问题的解决方案。它会将内容容器扩展到下一个高度，300 的倍数。

纯 JavaScript 版本

var e = document.getElementById('content');
var height = e.clientHeight;
var newHeight = 300 * Math.ceil(height / 300);
e.setAttribute('style', 'height: ' + newHeight + 'px;');

演示

Try before buy

jQuery 版本

var e = $('#content');
e.css('height', 300 * Math.ceil(e.height() / 300));

演示

Try before buy