Twitter Bootstrap遗产:跨度上的统一高度

dio*_*ney 6 html css height twitter-bootstrap

见下图:

在此输入图像描述

我需要的是扩大B列以匹配第一列高度,或者如果我有多个列,它们始终保持相同的高度,调整到最大列高度.

我已经玩了一段时间没有与任何成功<div class="clearfix"></div>height: 100%.

我正在使用Twitter Bootstrap 2.3.2.

HTML:

 <div id="main" class="row-fluid">
        <div class="span6">
            <div>
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBB
            </div>
        </div>
        <div class="span6">
            <div>
                B
            </div>
        </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

CSS:

@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css");

        #main {
            height: 5em;
        }
        .span6 {
            background-color: lightgray;
            border: 1px solid red;
        }

        .span6 > div {
            background-color: lightblue;
            border: 1px solid green;
        }
Run Code Online (Sandbox Code Playgroud)

由于某些原因,小提琴与上面代码的图像不相似,但是如果你将test.html它粘贴到它中就可以正常工作.

编辑:

我怎样才能调整内部span divs 的高度?

编辑2:

有了@Coop的指导,我终于设法解决了这个问题.我来到以下代码:

var content_height = [];

jQuery('.row-fluid > div')
    .each(function () {
        content_height.push(jQuery(this).css({minHeight: 0}).height());
    })
    .each(function () {
        jQuery(this).css({

        minHeight: Math.max.apply(Math, content_height)
        });
    });
Run Code Online (Sandbox Code Playgroud)

Coo*_*oop 3

要使用 jQuery 解决方案执行此操作:

首先将该类添加eHeight到要赋予相同高度的行中的所有 div。然后添加下面的 jQuery:

$('.eHeight').each(function () {
  var eHeight = $(this).parent().innerHeight();
  $(this).outerHeight(eHeight);
});
Run Code Online (Sandbox Code Playgroud)

请参阅此处的小提琴: http: //jsfiddle.net/VA6D4/

请注意,jQuery 需要位于 a 中$(window).load,因为 Google Chrome 在加载图像之前为图像提供 0 高度和宽度。