Question

我遇到了css的问题。查看我的网站http://yourdesigns.nl/ssi/index.php

正如您所看到的，我在索引页的中心有一个3列的行。每列都有一个边框，给人一种“盒状”的感觉。问题是，一旦盒子的内容小于另一盒子，盒子的高度就会变小。

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

如何才能让我的所有盒子都具有相同的高度，而不会在我的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 );
});

这是一个演示jQuery选项的jsfiddle：http://jsfiddle.net/EjPSw/

Answer 2

您必须将盒子放在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 3

您可以尝试使用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);
}
});

Answer 4

尝试类似

的内容

 min-height: 500px

Answer 5

我不知道非css3解决方案，我会通过计算所有方框来获得jQuery解决方案，而不是给所有方框提供最高的高度。

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

5 个答案: