修复绝对定位的div标签在列表中的高度 [英] Fix height of an absolute positioned div tag in a list

问题描述

我在网格列表中定位了一个绝对位置的div标签，所以它被其他div的包裹着。我想创建一个类，使绝对定位div的高度流动，直到遇到另一个类来修复（或关闭）绝对定位的div标记的高度！

或者找到一个解决方案，让高度从绝对位置的div，例如第1行到第3行等等？这里是代码：

jsFiddle

 < div id =wrap_day_kalendar> 
< div id =day_kalendarclass =ui-selectable> 
< div class =row>< span> 2016年5月14日星期六< / 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>新活动< / span> 
< span class =newevent>第二个事件< / 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> 
  

解决方案

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

这篇关于修复绝对定位的div标签在列表中的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！