Question

我有以下代码：

<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
    style="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>

现在我想更改id为_vertical结尾的所有元素的高度自动设置为其父高度，我的意思是它应该自动调整大小，以防其父级的div的高度增加，该增加将到期在其他一些元素上增加了它的麻烦。

例如：

向mainDiv313添加一些内容会增加其父级高度，即mainDiv31高度，而后者应增加mainDiv31_vertical

应该为mainDiv31_vertical的高度分配什么，以便它表现出这种行为。我不希望JS或Jquery改变它，因为它增加了处理......

已将其设置为inherit，因为它会使其从父级继承高度。

请提出建议。

编辑

我想要像

这样的东西

div1 -->div11
       >div1_vertical
       >div12

这意味着div1在更改div11高度div1_vertical高度中有另外3个其他div应该自动更改而没有一些js或jquery我想要一些css属性我没有提到div1上的任何高度所以它会自动调整它们的孩子

Answer 1

你可以使用jQuery执行此操作：

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

亲爱的，你不应该。 ID应该是唯一的和语义的，而不是对属性的描述。这就是课程的用途。使用class =“vertical”而不是

Answer 2

要设置ID为div的所有_vertical元素，这应该可以解决问题：

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

但是，当更改父高度时，无法自动执行此操作，因为在DOM操作和变异时没有要绑定的事件。

我同意罗兰的观点，你不应该在你的身份证明中_vertical，而应该作为一个单独的阶级。

这是一个使用CSS和相对/绝对定位的示例，可能对您有用。

<强> 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>

同时更改具有相同类型的ID的所有元素的高度

2 个答案: