Question

我有一个设计难题。我面前的网站规格（以及支持psd文件）有一个带有缝合边缘的主体容器。我也有动态内容，并且知道当高度调整到内容时，针迹将在奇数位置被剪裁，这看起来像垃圾。

我最理想的是以可预测的方式控制和收集容器高度，以便我知道容器将始终可以被20px整除，这样我的背景切片就不会被缝合在一个针脚之间。 / p>

因此，在经典的时尚中，我将在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/

更好的演示由30Dot http://jsfiddle.net/d4Q3S/

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

Answer 2

使用jquery取高度mod 20，如下所示：

var difference = 20 - ($("#content_area").height() % 20);

然后，将其添加到内容区域的高度：

$("#content_area").height( $("#content_area").height() + difference);

您可以轻松地合并这两个陈述。但是，作为免责声明，确保高度不包括您的边界等，因为您可能希望在计算差异时从.height()中减去这些。

寻找一个jQuery解决方案，以20px的增量控制容器高度，最接近20px维度

2 个答案: