CSS 列保持相同的高度

Question

我正在尝试将一些 CSS 设置为 3 列。

中间和右列可以在其中包含文本。我目前拥有它，以便中间列将换行文本，所有其他列将根据该列调整大小。我需要正确的列以相同的方式影响其他列。我不是 CSS 专家，主要使用 C# 编写代码。

我尝试了其他解决方案，这是我最接近我想要的解决方案。有什么想法吗？

到目前为止的 CSS：

#outer
{
    width: 100%;
    margin: auto;
    padding:0;
}

#leftcolumn
{
position: absolute;
height: 100%;
width: 5px;
-webkit-border-radius: 0px;    
margin: 0 ;
background-color: Yellow;
z-index:10;    
left:0px;
top:0; 
}

#rightcolumn
{
position: absolute;
height: 100%;
width: 75px;
-webkit-border-radius: 0px;    
margin: 0 ;
background-color: green;
right:0px;
top:0; 
}

#middlecolumn
{
-webkit-border-radius: 0px;    
margin-left:5px;
margin-right:75px;
background-color: #62A9FF;
left:0px;
top:0px; 
}

#inner
{
width:100%;
margin:0 auto;    
position: relative;
-webkit-transform: rotate(0deg); 
-webkit-transform-origin:50% 50%; 
}

http://jsfiddle.net/6eshT/15/

Answer 1

使用display: table-cell; 非常简单。

Answer 2

我不相信你可以用直接的 CSS 做到这一点，但你可以使用 jQuery 很容易地做到这一点。

这是一个小提琴： http://jsfiddle.net/6eshT/8/

基本上，您将所有列设置为具有相同的类名。至少有一个通用类，即class="col somethingElse"“somethingElse”可以是特定于每一列样式的类。

jQuery 将是：

$('document').ready(function(){
    var max = -1;
    $(".col").each(function() {
        var h = $(this).height(); 
        max = h > max ? h : max;
    });
    $(".col").css({ 'height' : max })
});

Answer 3

使多列高度相同的最简单方法是使用假列。 http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

Answer 4

你可以使用 display:flexbox 来了解更多 http://css-tricks.com/snippets/css/a-guide-to-flexbox/