逐步设置 div 高度以适应平铺背景答案

【问题标题】：Set div height in steps to fit tiled background逐步设置 div 高度以适应平铺背景
【发布时间】：2011-09-21 12:21:49
【问题描述】：

我需要控制 div 的高度始终以 20 步长显示。我有一个重复的 div 背景，高 20 像素，我希望 div 始终以正确的方式结束。我在这里找到了我认为的解决方案： Set height of an element on multiples of a number?

但是当我尝试时它不起作用。我是 jquery 的新手，可能犯了一个简单的错误。

在下面的测试 html 代码中，我希望 div 的高度始终以 100 像素的步长出现，但它不起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://`enter code here`www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test jquery</title>
<script type="text/javascript" src="jquery.js"></script> 
<script language=”javascript”>
$(document).ready(function(){

    $('#testCol').height(function(i, h) { return Math.ceil(h / 100) * 100; });

});
</script>

<style type="text/css">
    #testCol {
        width: 150px;
        background-color:#FFCC00;
    }
</style>
</head>

<body>

    <div id="testCol">df ds d sfdhs fdsf ds fhsdu ds iuhsdi fsdf dhsf sdiuh isdf iusd fiushd fiuds i uhsdiu isudf iusd fiusdh fiusd fih wtwpr wer rew</div>

</body>
</html>

【问题讨论】：

标签： jquery html css

【解决方案1】：

从脚本标记中删除语言=“javascript”。这阻止了浏览器运行脚本。你不需要这个指令，但如果你想使用它，它应该是：

<script type="text/javascript">

【讨论】：

+1。而已。没有它也能正常工作。见小提琴：jsfiddle.net/jasongennaro/RCLam

【解决方案2】：

为了以 20px 为单位设置 div 的高度，我将值更改为以下：

<script type="text/javascript">
$(document).ready(function(){

    $('#testCol').height(function(i, h) { return Math.ceil(h / 20) * 20; });

});
</script>

【讨论】：

【解决方案3】：

一些简洁的数学运算如下，只需将 roundTo 变量设置为您希望四舍五入的数字。

var height = parseInt($jQueryObj.height(), 10),
    roundTo = 20;

if (height && (height % roundTo !== 0))
{
    height = roundTo * Math.round(height / roundTo);
}

我在这里设置了一个演示小提琴：http://jsfiddle.net/i_like_robots/uBcHh/

您也可能会遇到填充问题，因此请记住根据需要添加或减去。为了安全起见，您可能应该设置minHeight 而不是height。如果真的有必要，我会真诚地问问自己或任何要求此功能的人。

【讨论】：