且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-04 13:27:52

使用javascript / jQuery,您可以获得父div和x后续div(如果你在本例中用.col-11遍历div),那么你设置div的高度。



这是一个(愚蠢的)例子,如果你想让所有.newevent div的3倍于当前单元格高度:



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


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>

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