修正列表中绝对定位div标记的高度

Question

我在网格列表中放置了一个绝对位置的div标记，所以它被其他div的标签包装在那里。我想要创建一个类，使绝对定位div的高度流到满足另一个类来修复(或关闭)绝对定位div标记的高度！

还是找到一个解决方案，给绝对定位的div从ex:第1行到第3行，等等？以下是代码：

https://jsfiddle.net/p5hykd0x/

<div id="wrap_day_kalendar">
    <div id="day_kalendar" class="ui-selectable">
        <div class="row"><span>Saturday, 14 May 2016</span></div>
        <div class="row dimgrey"><span>CEST +02:00</span></div>     

        <div class="row border-up">
            <div class="col-1 dimgrey text-right"><span class="">10 PM</span></div>
            <div class="col-11 cornsilk selectable ui-selectee"><span>&nbsp;</span></div>
        </div>
        <div class="row">
            <div class="col-1 dimgrey fix-border">&nbsp;</div>
            <div class="col-11 border-up-dashed cornsilk selectable ui-selectee">
                <span>&nbsp;</span>
                <span class="newevent">New event</span>
                <span class="newevent">Second event</span>

            </div>
        </div>  
        <div class="row border-up">
            <div class="col-1 dimgrey text-right"><span class="">9 PM</span></div>
            <div class="col-11 cornsilk selectable ui-selectee"><span>&nbsp;</span></div>
        </div>
        <div class="row">
            <div class="col-1 dimgrey fix-border">&nbsp;</div>
            <div class="col-11 border-up-dashed cornsilk selectable ui-selectee"><span>&nbsp;</span></div>
        </div>  
    <div class="row border-up">
        <div class="col-1 dimgrey text-right"><span class="">7 PM</span></div>
        <div class="col-11 cornsilk selectable ui-selectee"><span>&nbsp;</span></div>
    </div>
    <div class="row">
        <div class="col-1 dimgrey fix-border">&nbsp;</div>
        <div class="col-11 border-up-dashed cornsilk selectable ui-selectee"><span>&nbsp;</span></div>
    </div>  
    </div>
</div>

Answer 1

使用javascript/jQuery，您可以获得父div的高度和x后续div的高度(在本例中，您可以使用.col-11迭代divs-11)，然后设置div的高度。

下面是一个(愚蠢的)示例，如果您想将所有.newevent div设置为当前单元格高度的3倍：

    $(document).ready(function () {
       $('.newevent').each(function() {
           var parentHeight = parseInt($(this).parent().css('height'));
           $(this).css('height', 3 * parentHeight  + 'px');
      });
   })