【问题标题】:Find the height of absolutely positioned child element and setting it's height to its parent查找绝对定位的子元素的高度并将其高度设置为其父元素
【发布时间】:2013-02-08 03:25:53
【问题描述】:

我有一个 cmets 列表,它们的内容位于绝对定位的 div 中。这是设计的一部分。它们在一个设置为 display: none 的弹出框中,然后使用点击事件淡入。

我遇到的问题是我需要获取内部绝对内容的高度并将该高度设置为其父级,但似乎无法使其正常工作。每个项目都可以是任何长度,因为它们是 cmets。

我在这里做了一个小提琴来展示我有什么样的结构。 http://jsfiddle.net/ZTDyA/

这是结构

<div class="hidden">
    <ul class="list">
        <li>
            <div class="inner">there is some content here</div>
            <div class="base">This is a div under the .inner div</div>
        </li>
        <li>
            <div class="inner">For the thing I have made this has to be positioned absolutely, but the content could be of any length so I need the parent to each of these inners to be set to the height of the inner div.</div>
            <div class="base">This is a div under the .inner div</div>
        </li>
    </ul>
</div>

【问题讨论】:

  • 为什么不能从.inner 中删除position: absolutejsfiddle.net/dfsq/ZTDyA/2
  • 由于设计原因,评论必须位于悬停时可见的另一层之上。

标签: javascript jquery html css absolute


【解决方案1】:

当然,你可以这样做:

$('.list li').each(function() {
    $(this).height( $('.inner', this).height() );
});

jsFiddle:http://jsfiddle.net/ZTDyA/1/

我不明白为什么它是绝对定位的。如果有的话,您可能想要绝对定位 LI。也许如果您详细说明,我们可以提供更好的解决方案。像这样(通过 js)设置高度是不好的做法。

【讨论】:

  • 这完全与这个评论区的设计有关,基本上我在悬停时显示的评论内容下面有一个div。这完美解决了谢谢。
【解决方案2】:

检查这个:

$('button').on('click', function() {    
var hei=  $('.inner').height();
$('.inner').closest('li').height(hei); 
});

【讨论】:

    猜你喜欢
    • 2021-12-29
    • 1970-01-01
    • 2014-06-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多