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_vertical
height 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>
精彩评论