Question

我正在使用tutorial by Ben Holland开发一个插板式博客（如Pinterest）。每个引脚都有一个绝对位置，其位置（顶部和左侧）使用jQuery脚本http://labs.benholland.me/pinterest/js/script-centered.js

计算

一切都很完美（see demo），但唯一需要做的就是添加页脚。当我尝试添加页脚时（无论它是如何定位的：相对或绝对），它会显示在页面顶部（position:relative）或者它漂浮在页面中间的某个位置（{{1 }}）。页脚从不出现在博客下面。

我尝试了很多CSS解决方案（clearfixes，浮点数，各种不同的位置组合），毕竟我得出的结论是没有JS是不可能的。

将插板放在容器中，给出容器position:absolute;bottom:0并添加正确的高度，可以解决问题。在此之后，页脚可以放在容器下面。这就是我被困住的地方。

我是JavaScript的初学者，有人可以帮助我吗？

Answer 1

就像你说的那样，你可以使用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>

和css代码如：

header{height:30px;background-color:green;}
footer{height:20px;background-color:gray;}
section{position:relative;} //It's important,absolute element will calculate position depending on nearest parent which has sure position.

至于js代码，请看array：block []，这个数组有每列高度的记录，你可以在控制台中打印它。所以你需要做的就是将block []的最大值设置为section。这里我在函数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-其他的高度），与部分的高度进行比较并在set seciton的高度线中替换它。

计算pinboard样式博客的容器高度（基于绝对元素）

1 个答案: