Calculate Elements Dimensions In Order To Fit Inside Container

I have an ul with fixed width 235px and height 200px. This ul is populated by n numbers of li depending on a query results. How can I calculate the dimensions of the li in order fo

Solution 1:

Make ul height dynamic according to number of li and apply css display:inline-block and overflow: hidden to ul

Solution 2:

OK, here's my attempt at code that will work out a fairly high coverage of the ul (not sure if it's actually maximal), given the constraints that the lis need not be square, but must all be the same size for any given number of items.

The first part gives a function getSquare(n) which will memoize the generation of squares, so that if you need to use it multiple times on a page it won't keep recalculating things.

The second part is the function that does the calculation. Pass it the number of items, and the width and height of your container, and it will return an object with width and height properties for the items. It doesn't ensure integer results.

The line with the throw is just there for testing purposes really, could be removed.

var getSquare = (function()
{
    var squares = [];
    returnfunction(n)
    {
        if (!squares[n])
        {
            squares[n] = Math.pow(n, 2);
        }
        return squares[n];
    };
})();


functioncalcItemDimensions(itemCount, areaWidth, areaHeight)
{
    var x, y, slots,
        n = 0,
        sq = 0;

    while (itemCount > sq)
    {
        n += 1;
        sq = getSquare(n);
    }

    x = y = n;
    slots = sq;

    while (slots - itemCount >= x)
    {
        if (x === y) { y -= 1; }
        else { x = y; }
        slots = x * y;
        if (slots < itemCount) { thrownewError('slots < itemCount: ' + slots + ' < ' + itemCount); }
    }

    return { width: areaWidth / x, height: areaHeight / y };
}

Solution 3:

Do not mention width for li at all

HTML

<divclass="wrap"><ul><li><ahref="#">link1</a></li><li><ahref="#">link2</a></li><li><ahref="#">link3</a></li></ul></div>

CSS

.wrap{
    width:235px;
    height:200px;
    background:grey
}
ul{background:red; margin:0; padding:0; width:100%;}
li{
    display:inline-block;  
    margin-right:2px;
    background:red;
    border-right:solid black green; 
}

DEMO

---

CASE 2

Add height:100% to li (it force li to cove the entire available height) and give the same bg color for both ul & li so that it looks like it has occupied the available width

html,body{height:100%}
ul{
   background:red; 
   margin:0; padding:0; 
   width:235px;
   height:200px;
}
li{
    display:inline-block;   height:100%;
    margin-right:2px;
    background:green;
    border-right:solid black green; 
}

DEMO 2

Solution 4:

You might do this with jQuery if you want to.

something like:

$(document).ready(function(){
   var liCount = parseInt($('ul li').length());
   var height = parseInt($('ul').height();
   var liHeight = height / liCount;
   $('ul li').css('height', liHeight);
});

An ofcourse, Don't forget to give the ul and ID and pass this into jQuery instead of 'ul li', otherwise all li object in your page will be affected