Javascript 计算钉板风格博客的容器高度（基于绝对元素）
我正在使用开发一个钉板风格的博客（比如Pinterest）。每个管脚都有一个绝对位置，其位置（顶部和左侧）由jQuery脚本计算 一切都很完美（），但唯一需要做的就是添加页脚。当我尝试添加页脚（不管它是如何定位的：相对或绝对），它会出现在页面的顶部（<代码>位置：相对< /代码>），或者它漂浮在页面中间的某个地方（<代码>位置：绝对；底部：0 < /代码>）。页脚永远不会出现在博客下面 我尝试了许多CSS解决方案（clearfixes、Float、各种不同的位置组合），在所有这些之后，我得出结论，没有JS是不可能的 问题可以通过将插销板放置在容器中，给出容器Javascript 计算钉板风格博客的容器高度（基于绝对元素）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用开发一个钉板风格的博客（比如Pinterest）。每个管脚都有一个绝对位置，其位置（顶部和左侧）由jQuery脚本计算 一切都很完美（），但唯一需要做的就是添加页脚。当我尝试添加页脚（不管它是如何定位的：相对或绝对），它会出现在页面的顶部（位置：相对< /代码>），或者它漂浮在页面中间的某个地方（位置：绝对；底部：0 < /代码>）。页脚永远不会出现在博客下面 我尝试了许多CSS解决方案（clearfixes、Float、各种不同的位置组合），在所有这些之后，我得出结论，没有JS是不可
位置：相对并添加正确的高度来解决。在此之后，可以将页脚放置在容器下方。这就是我被困的地方
我是JavaScript的初学者，有人能帮我做到这一点吗？正如您所说，您可以使用div来包含这些绝对元素
该结构类似于：
<body onload="setupBlocks();">
<header>header</header>
<section id="container">
<div class="block">
<p>Lorem ipsum dolor sit amet....</p>
</div>
......
</section>
<footer>footer</footer>
</body>
至于js代码，请看array:block[]，这个数组有每个列的高度记录，您可以在控制台中打印出来。
所以您需要做的就是将block[]的最大值设置为section。
在这里，我在function positionBlocks中添加了两行和一个函数以获得最大值
function positionBlocks() {
$('.block').each(function(i){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':(leftPos+spaceLeft)+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
var max = Array.max(blocks); //you need to write a function to get max value of block
$('section').height(max); //set section(or div,as you wish)'s height
}
// Function to get the Min value in Array
Array.min = function(array) {
return Math.min.apply(Math, array);
};
// Function to get the Max value in Array
Array.max = function(array) {
return Math.max.apply(Math, array);
};
如果你想让你的脚在最后，如果部分的高度太小，你需要计算（scollheight other's height），与部分的高度进行比较，并将其替换到set seciton的height line中
function positionBlocks() {
$('.block').each(function(i){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':(leftPos+spaceLeft)+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
var max = Array.max(blocks); //you need to write a function to get max value of block
$('section').height(max); //set section(or div,as you wish)'s height
}
// Function to get the Min value in Array
Array.min = function(array) {
return Math.min.apply(Math, array);
};
// Function to get the Max value in Array
Array.max = function(array) {
return Math.max.apply(Math, array);
};