当DIV高度变化时，DIV的造型背景色

Question

我有laster asp.net mvc剃须刀代码。

@{
    foreach (var note in Model.Notes)
    {
        <div class="row data-area" style="margin-bottom:5px !important">
            <div class="small-2 columns magmalabel" style="background-color:#01466d;">
                @Html.DisplayFor(m => note.NoteTypeId)
            </div>
            <div class="small-10 columns">
                @Html.DisplayFor(m => note.Notes)
            </div>
        </div>
    }
}

这起作用，但偶尔，第二列单词由于长度而包装，这是通过设计，但是显示的第一个div：

@Html.DisplayFor(m => note.NoteTypeId)

没有正确的格式，因为它不会为第二行染色。

我知道这是一个高度问题，因为我设法做到这一点的唯一方法是将高度属性设置为Chrome Console中的两倍。

                <div class="small-2 columns magmalabel" style="background-color:#01466d;height:50px;">

在Chrome中，单个高度等于25px的

我已经看了看许多解决方案，但到目前为止都没有奏效。

Answer 1

必须求助于一些jQuery来解决此问题。

在下面的标记中添加了一个占位符类，排名：

<div class="row data-area" style="margin-bottom:5px !important">
    <div class="small-2 columns magmalabel rowHeading" style="background-color:#01466d;">
        @Html.DisplayFor(m => note.NoteTypeId)
    </div>
    <div class="small-10 columns">
        @Html.DisplayFor(m => note.Notes)
    </div>
</div>

然后简单地添加以下jQuery脚本：

  $('.rowheading').each(function () {
        var parentHeight = $(this).parent().height();
        $(this).height(parentHeight);
    });

这使浏览器能够为页面上的所有Divs设置行高度以正确格式化高度。