CODEWITHSUNDEEP
javascriptjquerycss
David Repas
David Repas

Reputation: 25

Equally distribute the height of an unknown number of children divs inside a parent div

Let's say that I have the following (2) divs:

Example #1

<div style="height:100px;">
  <div>1</div>
  <div>2</div>
</div>

Example #2

<div style="height:400px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

I would like to automatically and equally distribute the height for the child divs without specifically stating the height.

Under normal circumstances, for the first example, I could state a height of 50px (or 50%) for each of the inside divs. And for #2, I could state a height of 100px (or 25%) for each of the inside divs.

The problem is that I will have an unlimited number of parent div heights and an unknown number of children divs within the parents (some may have one child, while others may have 5 or more). So, I need a way to have the children divs automatically distribute the height between each other regardless of how many exist.

Thanks!

Upvotes: 1

Views: 776

Answers (6)

dSquared
dSquared

Reputation: 9825

Go through each parent div, get the total number of child divs and divide the parents height by them; like this:

<div class="parentDiv" style="height:500px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="parentDiv" style="height:200px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

$('.parentDiv').each(function(index, record){
   var t = $(this).children().length;
   var h = ($(this).height() / t);
   $('div', this).css('height', h+'px');
});

This will go through each of the divs and update the child divs size based on the parents height.

Here's a fiddle to display it in action: http://jsfiddle.net/krEYR/1/

I hope this helps!

Upvotes: 0

aorcsik
aorcsik

Reputation: 15552

Below code would resize all children div of #yourdiv with equal height:

$("#yourdiv").each(function() {
    var ydh = $(this).height(),
        num = $(this).children("div").size(),
        dh  = ydh / num,
        ah  = 0;
    $(this).children("div").each(function(i) {
        var h;
        if (i + 1 == num) { // last item
            h = ydh - ah;
        } else {
            h = Math.round((i + 1) * dh);
        }
        $(this).height(h);
    });
});

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

http://jsfiddle.net/KQZZy/

$(".parent").each(function(){
    var $this = $(this);
    var $children = $this.children();

    $children.height($this.height() / $children.length - 2);
});

Note that the - 2 is to adjust for the borders I have on the divs and in your case may be unneeded.

Upvotes: 2

Arun Krishnan
Arun Krishnan

Reputation: 1958

<div id="auto-height" style="height:400px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>


function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('#auto-height').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
        $(this).css('height', heights[0]);
    });        
}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);


Try with this...

Upvotes: 0

kojiro
kojiro

Reputation: 77127

The simple solution is to use display: table;. Unfortunately, that leaves out Internet Explorer 6 and below. But consider how easy-to-read this jsfiddle is.

Upvotes: 3

a&#39;r
a&#39;r

Reputation: 36999

Just get the parent's height, divide by the number of child div's and set their heights.

var $parent = $('div#parent'),
    $children = $parent.children(),
    child_height = $parent.height() / $children.size();

$children.height(child_height);

Upvotes: 4

Related Questions