列的CSS高度再次

沒有背景技巧，如何將內容＃3的列設置爲與紅色列相等？列的CSS高度再次

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

來源

2013-06-05 kicaj

CSS的聖盃之一覆蓋了多個博客。尋找「3柱液體佈局」或類似的。 – Ben

在10行以下的js中很容易做到，不需要libs。看到我的答案。 :) – vdbuilder

，所以添加以下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"; 
}

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

來源

2013-06-05 07:20:49 vdbuilder

是啊！而已！非常感謝：） – kicaj

-1

我已經添加了一些jQuery代碼

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

試試這個：http://jsfiddle.net/eakDL/6/ IM不知道如果我理解你的權利。

來源

2013-06-05 06:39:35

你的腳本適用於藍色的容器，總之是平等的。 – kicaj

列的CSS高度再次

回答

相關問題