具有全高垂直边框的列答案

【问题标题】：Columns with full-height vertical borders具有全高垂直边框的列
【发布时间】：2011-06-04 07:00:54
【问题描述】：

我希望这个模型中的两个垂直边框高度相同（即包含块的高度）：

可以看到，左边框看起来不错（因为左栏是最高的栏），但是右边框太短了（因为中间栏比左栏短）

我知道我可以通过给包含块一个明确的高度并给每个孩子一个 100% 的高度来做到这一点，但我不想这样做 - 相反我想允许不同的高度“论坛线程持有人”没有丑陋的滚动条/溢出

【问题讨论】：

也许这可以帮助你：positioniseverything.net/articles/onetruelayout/equalheight

标签： css

【解决方案1】：

你可以这样做...

HTML

<div id="container">
    <div id="left">
        abc
    </div>
    <div id="right">
        def
   </div>
</div>

CSS

#container {
       overflow: hidden;
}

#left,
#right {
   padding-bottom: 1000px;
   margin-bottom: -1000px;
}

jsFiddle.

【讨论】：

【解决方案2】：

您的云使用这段精彩的 jQuery 代码 -

function equalHeight(group) {
var tallest = 0;
group.each(function() {
    var thisHeight = $(this).height();
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
});
group.height(tallest);
}

它的基本作用是找到组中最高元素的高度，然后调整其他元素的高度。这样，即使您更改了元素的内容，高度仍然会被调整。像这样调用函数就行了

 equalHeight($('name_of_parent_element'));

【讨论】：

如果他们传递对父元素的引用，那将不起作用。他们会想要传递一个应该是相同高度的元素列表。此外，您似乎正在重塑Math.max()。