爲div設計背景顏色當div高度發生變化時

Question

我有以下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控制檯中的兩倍大小。

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

在Chrome中，單一的高度等於25像素的

我有這麼看着，看到許多解決方案，但至今無一奏效。

Answer 1

不得不訴諸一些jQuery來解決這個問題。

增加了一個佔位符類，rowHeading，以標記如下：

<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); 
    }); 

這使瀏覽器設置爲所有行的高度div上的正確格式的高度。