获取渲染的 DIV 高度

Question

我遇到了一个问题，我正在使用一个布局工具来调整大量 div 的大小。这些 div 有一个标题跨度，设置为 bottom : 0。在缩短的 div 上，这些很好，但是在延长的 DIV 上，这些浮动在 div 的底部上方。

我已经尝试了各种 CSS 方法来使跨度粘在底部，但是似乎一旦渲染，然后 freewall（布局脚本）就可以了，跨度不会被推回。

我尝试通过各种方法获取父 DIV 的高度。当我控制台记录 div 时，我可以看到它在 element.style 中呈现的高度（高度：222.4px）；但是，当我尝试访问样式时，它只返回 css 应用的背景图像，而不是渲染的高度。通过 jquery .height() 进行的任何尝试都只会返回不正确的 CSS 高度（200px）。

任何想法如何确保元素在布局调整大小后保持在底部，或者如何访问呈现的高度以便我可以以编程方式将其放回底部？

这里是 CSS

.guideScene
{
    height :            200px;
    width :             200px;
    min-width :         190px;
    background-size:    cover; 
    background-repeat:  no-repeat;
    background-position: center;
    position:           absolute;

}


@media all and (max-width: 768px) {
    .guideScene {
        height :        100px;
    }
}

.guideScene span
{
    font-family:        'Lato', sans-serif;
    font-color :        #000;
    font-weight:        700;
    font-size:          14px;
    line-height:        100%;
    min-height:         14px;
    background:         #fff;
    padding:            4px 10px 4px 10px;
    bottom:             0px;
    width:              100%;
    position:           absolute;

}

给你popNoodles：

        console.log( $(this.parentNode).outerHeight(true) );
        console.log( $(this.parentNode).height() );

或console.log( $(this.parentNode).attr('style') - 返回背景

        console.log(this.parentElement) gives me the data

我正在尝试访问这里的这个属性！

Answer 1

.height() 只给出元素高度

.innerHeight() 给出元素高度加上顶部/底部填充

.outerHeight(true) 可能是您正在寻找的，因为它提供了元素高度、顶部/底部填充和边框，如果设置为 true，它将添加边距