javascript - 修复列表中绝对定位的 div 标签的高度

Question

我在网格列表中放置了一个具有绝对位置的 div 标签，因此它被其他 div 包裹在那里。我想创建一个类，使绝对定位的 div 的高度流动直到遇到另一个类来修复(或关闭)绝对定位的 div 标签的高度!

或者找到一个解决方案来为绝对定位的 div 提供高度，例如:第 1 行到第 3 行等等？这是代码:

jsFiddle

<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 遍历 div)，然后设置您的 div 的高度。

这是一个(愚蠢的)示例，如果您想让所有 .newevent div 成为当前单元格高度的 3 倍:

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