jQuery: stretch elements’ heigth

I have an unsorted list of elements with children.
I wanted to make all the element stretch their height not counting on how much content is in there.
There are some solutions which might be done using css, but all of them make layout too complicated and too many layers should be created to get what I want.
Why not to user jQuery for this?

I have the following html code:

  • Title #1

    • chapter #1.1
    • chapter #1.2
    • chapter #1.3
  • Title #2

    • chapter #2.1
    • chapter #2.2
  • Title #3

    • chapter #3.1
    • chapter #3.2
    • chapter #3.3
    • chapter #4.3

Let’s apply css to see how it looks like:

 ul#container {
            background: #000;
            overflow: hidden;
        }
        li {
            float: left;
            background: #fff;
        }
        li li {
            float: none;
        }

And it looks as following:

We are adding just some js code after the #container

 var menuHeight = jQuery("#container").height();
           jQuery('#container li').height(menuHeight);

           jQuery('#container li li').height("auto");

and we got new look:

Leave a Reply

%d bloggers like this: