Changing height of all elements with same type of ids at once

I have the following code:

<div xmlns="http://www.w3.org/1999/xhtml"
    style="z-index: 1; position: absolute; top: 90px; left: 90px; background: none repeat scroll 0% 0% black; width: 800px;"
    id="mainDiv">
<div style="width: 405px;" class="floatLeft" id="mainDiv3">
<div style="width: 100%;" id="mainDiv31">
<div style="width: 107px; height: 100%;" class="floatLeft"
    id="mainDiv313"></div>

<div
    style="width: 2px; height: inherit; background-color: white; cursor: default;"
    class="floatLeft" id="mainDiv31_vertical"></div>

<div style="width: 296px; height: 100%;" class="floatLeft"
    id="mainDiv314"></div>
</div>

<div
    sty开发者_如何学Cle="height: 2px; width: 100%; background-color: white; cursor: default;"
    id="mainDiv3_hotizontal"></div>

<div style="height: 311px; width: 100%;" id="mainDiv32"></div>
</div>

<div
    style="width: 2px; height: inherit; background-color: white; cursor: default;"
    class="floatLeft" id="mainDiv_vertical"></div>

<div style="width: 393px;" class="floatLeft" id="mainDiv4">
<div style="height: 456px; width: 100%;" id="mainDiv41"></div>

<div
    style="height: 2px; width: 100%; background-color: white; cursor: default;"
    id="mainDiv4_hotizontal"></div>

<div style="height: 142px; width: 100%;" id="mainDiv42"></div>
</div>
</div>

Now I want to change the height of all elements with id's ending with _vertical to be automatically set to its parent height, I mean it should get resized automatically in case its parent's div's height increses that increase will be due to addition on some more elements to its botherly div.

For example:

On adding some stuff to mainDiv313 will increase its parent height i.e. mainDiv31 height which in turn should increase mainDiv31_vertical

What should be assigned to height of mainDiv31_vertical so that it exhibits this behavior. i would prefer not changing it by JS or Jquery as it increases processing...

Already set it to inherit as it will make it inherit the height from parent.

Please suggest something.

EDIT

i want something like

div1 -->div11
       >div1_vertical
       >div12

this means div1 has these 3 other div in it on change div11 height div1_verticalheight should change automatically without some js or jquery i want some css property i haven' mentioned any height on div1 so it automatically adjusts it children

You can do this with jQuery:

$("div[id$='_vertical']").height(function(){
  return $(this).parent().height();
});

But dear lord, you shouldn't. IDs should be unique and semantic, not descriptive of a property. That's what classes are for. Use a class="vertical" instead

To set all div elements with an id that ends with _vertical, this should do the trick:

$("div[id$='_vertical']").height(function(){
    return $(this).parent().height();
});

However, it is not possible to do this automatically when the parent height is changed because there are no events to bind to when it comes to DOM manipulation and mutation.

I also agree with Roland that you shouldn't have _vertical in your id, but rather as a separate class.

Here's an example using CSS with relative/absolute positioning that might work for you.

CSS

div.vertical {
    position: relative;
}

div.vertical div {
    position: absolute;
    top: 0;
    bottom: 0;
}

HTML

<div id="mainDiv31" class="vertical">
    <div id="mainDiv313"></div>
</div>