固定列表中绝对位置的div标签的高度

Question

I positioned a div tag with absolute position in a grids list, so it is wrapped there by others div's. I would like to make a class that make the height of the absolute positioned div to flow till will meet another class to fix (or to close) the height of the absolute positioned div tag!

Or to find a solution to give a height to absolute positioned div from ex: row 1 to row 3 and so on? here is the code:

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

With javascript/jQuery you can get the height of the parent div and of the x subsequent divs (if you iterate through the divs with .col-11 in this case) then you set the height of your div.

Here is a (stupid) example if you'd want to make all .newevent div 3 times the current cell height:

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