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

所以你添加以下内容是：

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";
}

到你的小提琴，你得到this fiddle。

Answer 2

我添加了一些jQuery代码

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

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

再次列CSS的CSS高度

2 个答案: