w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Calculate container height of pinboard style blog (based on absolute elements)

Just as you said,you may use a div to contain these absolute elements The construct like:

<body onload="setupBlocks();">
    <section id="container">
        <div class="block">
            <p>Lorem ipsum dolor sit amet....</p>

and css code like:

section{position:relative;} //It's important,absolute element will
calculate position depending on nearest parent which has sure position.

as to js code,Please look at array:block[],this array has the record of every column's height,you can print it in console. so what you need to do is just set max value of block[] to section. here I added two lines in function positionBlocks and a function to get max value

function positionBlocks() {
    var min = Array.min(blocks);
    var index = $.inArray(min, blocks);
    var leftPos = margin+(index*(colWidth+margin));
    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);

if you want to let your foot in the end if section's height too small,you need to calculate (scollheight-other's height)、compare with section's height and replace it in set seciton's height line.

© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.