CSS：如何让 div 的高度为某个数字的倍数？

Question

元素具有可平铺的背景。该

元素的高度将取决于其内容。 我需要该

元素的高度按背景图片大小的倍数进行拉伸。

例如，背景是64x64像素的图像。因此，如果要增加

元素的高度，我希望按照每次增加64像素的步长来实现。

这在CSS中是否可能？我在谷歌上没有找到相关线索。感谢您的时间！

- Jem

---

通常情况下，在CSS中无法这样做——CSS不能根据动态大小元素的内容设置条件样式。 - Oliver

在简单的 CSS 中无法实现。尝试使用 jQuery。 - NewUser

@newuser - 你不需要jQuery来实现这个功能，纯JavaScript也可以做到同样的事情。 - Rob

Answer 1

据我所知，CSS 无法实现此功能，但您可以使用一些 JavaScript 来解决。如果您可以访问 jQuery：

$(function() {
    $div = $('#the_div_id');
    var remainder = $div.height() % 64;
    var newHeight = $div.height() + (64-remainder);
    $div.css('height', newHeight);
});

- Christoffer

---

是的，文档准备好后，我想我会走那条路。谢谢 =) - Jem

不客气。顺便说一下，$(function() { ... }); 是“当DOM准备就绪时执行此操作”的速记方式，如果您是jQuery新手的话。正如@Rob所说，这也可以用原生Javascript实现，但我个人更喜欢jQuery。 - Christoffer

我以类似的方式使用了您的答案，只是在高度上有所不同： $pageContent = $ ('#pageContent'); var remainder = $div.height（）％64; 余数= 64-remainder; $div.css（'padding-bottom'，remainder）; 如果您正在尝试在CSS中使用其他高度，您不想进行修改，那么这将使该div增加到适当的高度。 - willcwf

Answer 2

针对您的具体情况，一种解决方案可能是使用新的 background-size CSS 属性。为了清晰起见，我将声明分开：

div.yourDiv {
    background-image: url('yourImage.jpg');
    background-repeat: repeat;
    background-size: contain;
}

然后，无论您的 div 的大小如何，您的图像都将完美平铺而不会被剪裁。较旧的浏览器将只获取平铺的图像，这可能是一个问题，也可能不是。

- CherryFlavourPez

---

非常有趣，我现在正在尝试！ - Jem

Answer 3

这个div的内容是什么？看起来你需要关注内容而不是设置div的正确大小 - this post详细介绍了一些非常简单的技巧来实现垂直韵律，应该可以解决问题（即通过使用64px的行高）

- Jordan Wallwork

---

实际上是关于一种俗气的用户界面：div代表梯子，其高度与div距离屏幕顶部的高度成比例 - 这使得平铺必要以连接到终止元素。 - Jem