CSS元素类 - 高度因内容而异，如何解决？

Question

我有一个问题与CSS。 检查我的网站http://yourdesigns.nl/ssi/index.php

正如你可以看到我有一个3列的行在索引页的中心。每列都有一个边框，可以产生“盒子般的”感觉。 问题是，一旦一个盒子的内容较少，那么盒子的高度就会变小。

我的目标是让所有的盒子都具有相同的高度，我知道这是可能的，只需将高度属性添加到我的盒子元素的类中，但所有内容都是从数据库中抓取的，所以如果我的客户端更新内容，这些框可能大于该类的固定高度值，从而导致内容与边框/框重叠。

我怎样才能让我所有的箱子具有相同的高度，而不会在我的css中给出固定的高度值？

由于提前，

迈克尔

Answer 1

如果你想保持框的高度相等，防止溢出，你可以在CSS中为你的盒子类设置高度和溢出属性：

.boxes 
{ 
    height:500px; 
    overflow: hidden; 
    text-overflow:ellipsis; // ends the text block with "..." - css3 no ie7/ie8 support 
} 

如果你想的箱子重新大小动态地根据您可以使用jQuery的最大的盒子：

$(document).ready(function() {  
    var largestBox = Math.max($('#box1').height(),$('#box2').height(),$('#box3').height()); 
    $('.boxes').height(largestBox); 
}); 

这里有一个展示的jsfiddle jQuery的选项：http://jsfiddle.net/EjPSw/

Answer 2

试着这么做

min-height: 500px 

Answer 3

我不知道一个非CSS3的解决方案，我会去一个jQuery解决方案通过计算所有的箱子而不是给所有的箱子最高的高度。

Answer 4

你必须把你的箱子放在一个div容器中。外容器有风情

{ 
    overflow: hidden; 
    border-bottom:1px solid gray; 
} 

而容器内的盒子应该有风格

{ 
    border:1px solid gray; 
    float:left; 
    text-align:center; 
    padding-bottom: 200em; 
    margin-bottom: -200em; 
} 

点击此链接为example：

Answer 5

你可以尝试使用jQuery。

给每个盒子一个id，例如box1，box2，box3;

ü可以使用jQuery这样的：

$(function(){ 
var box1 = $("#box1").height(); 
var box2 = $("#box2").height(); 
var box3 = $("#box3").height(); 

if((box1 > box2) && (box1 > box3)) 
{ 
    box2.height(box1); 
    box3.height(box1); 
} 
else if((box2 > box1) && (box2 > box3)) 
{ 
    box1.height(box2); 
    box3.height(box2); 
} 
if((box3 > box2) && (box3 > box1)) 
{ 
    box2.height(box3); 
    box1.height(box3); 
} 
});