Question

有点棘手的情况要解释。基本上我试图在我网站的内容div下面放置的整体图像是一个杂乱的盒子，带有蹩脚的边框，可以弯曲进出。

到目前为止我得到的是这样的（不相关的代码被移除）

<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图像只有在放置在这些300px图块之一的末尾时才会看起来正确。如果页面内容的高度仅导致显示最后一个背景图块的一半，则这些行不匹配。

打字这个我怀疑答案在于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

Answer 2

这是一个支持动态背景图像的i-sleep-sleep解决方案：

var content = $('#content'),
    height = content.height(),
    fixedImageHeight = null,     //.. number (pick one)
    srcImage = null,             //.. url to image (pick one)
    imageHeight = function() {
        return fixedImageHeight || function() {
            var image = new Image();
            image.src = srcImage;
            return image.height;
        }();
    }(),
    neededPadding = (height > imageHeight) 
        ? height % imageHeight
        : imageHeight - height;

content.height(height + neededPadding);

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

2 个答案: