【问题标题】：Equal height columns that resize with the window随窗口调整大小的等高列
【发布时间】：2012-05-13 08:35:21
【问题描述】：

我认为这个标记应该可以工作，但我一定做错了什么。我有两个 div，我希望它们具有相同的高度并在调整窗口大小时动态调整大小。当框内的文本换行时，其中一个框变得更高。

编辑：两个 div 并排，我希望较短的 div 调整为与较高的 div 相同的高度。如果用户有一个屏幕较小的设备或将窗口大小调整为更小，则会导致文本在一个框中换行。无论用户如何更改窗口大小，我都希望它们保持相同的高度。

$(document).ready(function () {    
    $('div.subFeaturedContainer > section').each(function() {

        var $sameHeightChildren = $(this).find('.subFeatured');
        var maxHeight = 0;

        $sameHeightChildren.each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $sameHeightChildren.css({ height: maxHeight + 'px' });

    });
});

HTML

<div class="subFeaturedContainer">
    <section class="subFeatured">
        <h2>Header</h2>
        <a href="#">Nam vel risus mauris, id lacinia nulla</a>
    </section>

    <section class="subFeatured">
        <h2>Header</h2>
        <a href="#">Donec tincidunt tellus ac dolor tristique blandit. Nam vel iaculis lorem.</a>
    </section>
</div>

CSS

.subFeatured {
width: 43.5%;
float: left;
background: rgba(0, 0, 0, 0.7);
border-top: 1px solid #b1bdbe;
padding: 2% 3% 2% 3%;
}

.subFeatured:nth-child(even) {
float: right;
}

【问题讨论】：

你能提供更多的背景信息吗？ “随窗口调整大小”是指仅在文档加载时还是在用户调整窗口大小时？您能否为您描述的文本溢出示例提供代码？
你有 CSS 吗，如果有请贴出来

标签： jquery resize height

【解决方案1】：

后期添加，但供将来参考，在较新的浏览器上，您可以使用flexbox 来实现此目的。

这是一个具有相同高度的 2 个 div 的示例 (FIDDLE HERE)

HTML

<div class="container">
  <div class="col-1">
    <p>I'm column one</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Here's my bottom text</p>
  </div>
  <div class="col-2">I'm just a small div</div>
</div>

CSS

.container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}

参考文献

【讨论】：

【解决方案2】：

这并不完美，但我最终使用了在这里找到的脚本：

http://www.tutrino.com/2011/12/08/equal-height-columns-with-jquery-jxcol-plugin/

【讨论】：

【解决方案3】：

这样就可以轻松搞定

   $(document).ready(function () { 

        maxHeight = 0;
        $('.subFeatured').each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $('.subFeatured').css({ height: maxHeight + 'px' });  
});

【讨论】：

【解决方案4】：

只需删除 > section ：您没有使用第一个选择器找到 englobing 元素。

见http://jsfiddle.net/dystroy/Pzm8k/

此外，也许您也想使用 jquery $(window).resize 绑定函数调用您的函数，以便在调整窗口大小时部分保持相等。

【讨论】：