较大div中的2 div必须等于相同的高度...但是如何? [英] 2 divs in a larger div must equal the same height... but how?

问题描述

这是一张图片:

问题是我的容器div中有2个div.容器div的高度随着容器的高度而增加，两个内部div的高度也一样.右边的div左边有一个边框...但是如果它是空的，它不会填满整个高度....我该怎么做?

What the problem is that I have 2 divs in a container div. The container div expands in height as nessiscary and so do the 2 inner divs. The right div has a border-left... but if it is empty it will not fill the entire height.... how do I do this?

推荐答案

您正在谈论的问题称为虚假列"，并且在过去的几年中已得到很好的报告和描述:)

The problem you're talking about is called "faux columns" and have been reported and described well over past few year :) http://www.alistapart.com/articles/fauxcolumns/

有几种解决方案:

• 在包含div的背景上使用背景，该背景会模仿边框
• 使用CSS3技术(display:table和display:table-cell，但这并不是真正意义上的CSS或CSS3弹性盒，这是高度实验性的，可能无法在大多数浏览器中使用)
• 使用JS将列高设置为元素的最大高度

最后一个解决方案非常好，因此，如果您使用的是jQuery，则可以这样实现:

The last solution is quite good so if you're using jQuery then it could be achieved like that:

var max=0;
$('#container').children().each(function(){
    if($(this).height()>max) max = $(this).height();
});
$('#container').children().each(function(){
    $(this).height(max);
});

该脚本遍历容器的所有子级，并找到最高的元素.然后再次进行迭代，并为每个参数设置最大高度.

The script iterates through all children of the container and finds the highest element. Then it iterates again and sets the maximum height to each of them.

这篇关于较大div中的2 div必须等于相同的高度...但是如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！