css - 再次CSS列的高度

Question

如何在没有背景技巧的情况下将内容#3 的列设置为与红色列相等？

<div class="container">
<aside>
    content#1<br />
    content#1<br />
    content#1<br />
    content#1<br />
    content#1<br />
    content#1<br />
</aside>
<div class="some">
    content#2<br />
    content#2
</div>
<div class="some">
    content#3
</div>

红色和第一个蓝色列是动态的，但红色总是最长的。

示例：http: //jsfiddle.net/eakDL/2/

Answer 1

所以你添加以下js：

setPositions = function (){
    var container = document.getElementById("container");

    var redHeight = container.children[0].offsetHeight;
    var blueOneHeight = container.children[1].offsetHeight;
    var blueOneBottomMargin = parseFloat(window.getComputedStyle(container.children[1]).marginBottom);

    var bluenTwoTopMargin = parseFloat(window.getComputedStyle(container.children[1]).marginTop);

    var blueTwoHeight = redHeight-(blueOneHeight+blueOneBottomMargin+bluenTwoTopMargin)+2; 

    container.children[2].style.height = blueTwoHeight+"px";
}

到你的小提琴，你得到这个小提琴。

Answer 2

我添加了一些 jQuery 代码

$(document).ready(function () {
     $(".some").css("height", ($(".container").find("aside").height() / 2) - 3);
});

试试这个： http: //jsfiddle.net/eakDL/6/我不确定我是否理解正确。