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();">
    <header>header</header>
    <section id="container">
        <div class="block">
            <p>Lorem ipsum dolor sit amet....</p>
        </div>
        ......
    </section>
    <footer>footer</footer>
</body>

and css code like:

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.

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() {
$('.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);
};

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.