jquery - 寻找一个 jQuery 解决方案来以 20px 增量控制容器高度，四舍五入到最近的 20px 尺寸

Question

我有一个设计难题。我面前的网站规范(以及支持 psd 文件)有一个带有缝合边缘的主体容器。我也有动态内容，并且知道当高度根据内容调整时，缝线会被剪裁在奇怪的地方，这看起来很糟糕。

理想情况下，我想要的是以可预测的方式控制和舍入容器高度，这样我就知道容器总是可以被 20px 整除，这样我的背景切片就不会被夹在针迹之间。

因此，在经典方式中，我将设置一个高度为 30px 的顶盖，一个相同的底盖，然后是一个 20px 的切片，该切片将重复填充主要内容区域。这个内容区域高度是我需要始终能被 20 整除的高度。

<div id="container">
<div id="top_cap"></div>
<div id="content_area">
[CONTENT]
</div><!--END CONTENT AREA-->
<div id="bottom_cap"></div>
</div><!--END CONTAINER-->

欢迎任何想法。

Answer 1

http://jsfiddle.net/loktar/b52qT/2/

由thirdDot提供的更好的演示 http://jsfiddle.net/d4Q3S/

$(function(){
    var curHeight = parseInt($("#content_area").height()),
        newHeight = Math.ceil(curHeight/20) * 20;
    $("#content_area").height(newHeight );
});