Javascript jQuery height（）不返回任何值

我想制作一个可滚动的div，当用户悬停在另一个div上时，该div会向下滚动。可滚动div内的内容会发生变化（它将只是文本），因此我无法为该div设置绝对高度值，这就是div的高度为“自动”的原因

当我在“.post right”div的CSS上设置绝对高度值时，我找到了一个解决方案，但如果div的高度是“auto”，它将不返回任何值，就像我需要的那样

我已经尝试将jQuery代码块放在（文档）上。ready函数也是如此，结果完全相同

有什么想法吗？谢谢，这是事先准备好的

HTML代码：

<div class="post-right-cont">
    <div class="post-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam libero ut nisi consectetur pretium. Donec auctor auctor mauris, in tempor mauris blandit et. Aliquam nibh felis, tincidunt a auctor vel, feugiat at enim. Duis faucibus porta mi ut fringilla. Pellentesque eleifend erat a tellus aliquam sodales. Nullam lorem tellus, accumsan quis laoreet id, luctus et urna. Curabitur eleifend tellus non orci ullamcorper adipiscing. Integer est tellus, bibendum at ultricies a, viverra at orci. Curabitur porta tincidunt nunc, at placerat ipsum malesuada et. Vivamus et est purus, id suscipit tortor. Curabitur turpis metus, dapibus et consectetur non, tincidunt in est. Vestibulum nisl libero, sodales sit amet auctor eu, congue at velit. Vivamus et erat massa, nec viverra risus. Fusce iaculis dolor vel augue ornare accumsan.<br/><br/>

    Quisque a metus arcu. Suspendisse hendrerit commodo justo in sagittis. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu. Cras laoreet nibh convallis magna congue sit amet consequat tortor porttitor. Duis et mauris non lorem consectetur luctus. Aliquam mollis sem sit amet tortor iaculis egestas. Duis tincidunt pellentesque leo, nec vulputate turpis dapibus sit amet. Aliquam rhoncus luctus orci, et aliquet eros porttitor in. Etiam arcu eros, viverra tristique tincidunt vel, facilisis et mauris.<br/><br/>

        Morbi congue auctor luctus. Sed nisl dui, varius id ornare et, tincidunt sit amet enim. Aliquam egestas ultricies nisl, id condimentum erat fermentum quis. Morbi lectus nunc, aliquam volutpat egestas quis, iaculis a nulla. Pellentesque fermentum mauris at libero pulvinar viverra. Aliquam a ante orci, a luctus purus. Vivamus ut est ut mauris pulvinar mattis ac et magna. Aenean congue dictum lectus at suscipit. Suspendisse interdum, erat pulvinar gravida vulputate, mi mauris feugiat justo, at euismod augue sapien eu sapien. Praesent at quam purus. In hac habitasse platea dictumst. Fusce vel tellus a massa tempor volutpat a at magna. In eu enim odio. Quisque bibendum tortor est. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu.
    </div>
    <div class="scroll-down"></div>
    <div class="scroll-up"></div>
</div>

.post-right-cont {
    width: 540px;
    height: auto;
    overflow: hidden;
    position: relative;
}

.post-right {
    position: absolute;
    top: 0;
    left: 20px;
    height: auto;
    width: 480px;
    padding-top: 40px;
}

$(window).load(function() {
// SCROLL POST

            // EDIT - post-right-cont height was set up before. I just past it here now.
    var wHeight = $(window).height();
            $('.post-right-cont').css('height', wHeight - 36);

    if ($('div.post-right').height() > $('.post-right-cont').height()) {

        $('div.scroll-down').hover(function() {animateContent('down');}, function() {
            $('div.post-right').stop();
        });

        $('div.scroll-up').hover(function() {animateContent('up');}, function() {
            $('div.post-right').stop(); 
        });
    }

    function animateContent(direction) {

        var containerHeight =  $('.post-right-cont').height();

        var textHeight = $('div.post-right').height();

        var animationOffset = textHeight - containerHeight;

        if (direction == "up") {
            animationOffset = 0;
        }

        $('div.post-right').animate({"top" : -animationOffset + "px" }, 8500);

    }
});

jQuery:

<div class="post-right-cont">
    <div class="post-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam libero ut nisi consectetur pretium. Donec auctor auctor mauris, in tempor mauris blandit et. Aliquam nibh felis, tincidunt a auctor vel, feugiat at enim. Duis faucibus porta mi ut fringilla. Pellentesque eleifend erat a tellus aliquam sodales. Nullam lorem tellus, accumsan quis laoreet id, luctus et urna. Curabitur eleifend tellus non orci ullamcorper adipiscing. Integer est tellus, bibendum at ultricies a, viverra at orci. Curabitur porta tincidunt nunc, at placerat ipsum malesuada et. Vivamus et est purus, id suscipit tortor. Curabitur turpis metus, dapibus et consectetur non, tincidunt in est. Vestibulum nisl libero, sodales sit amet auctor eu, congue at velit. Vivamus et erat massa, nec viverra risus. Fusce iaculis dolor vel augue ornare accumsan.<br/><br/>

    Quisque a metus arcu. Suspendisse hendrerit commodo justo in sagittis. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu. Cras laoreet nibh convallis magna congue sit amet consequat tortor porttitor. Duis et mauris non lorem consectetur luctus. Aliquam mollis sem sit amet tortor iaculis egestas. Duis tincidunt pellentesque leo, nec vulputate turpis dapibus sit amet. Aliquam rhoncus luctus orci, et aliquet eros porttitor in. Etiam arcu eros, viverra tristique tincidunt vel, facilisis et mauris.<br/><br/>

        Morbi congue auctor luctus. Sed nisl dui, varius id ornare et, tincidunt sit amet enim. Aliquam egestas ultricies nisl, id condimentum erat fermentum quis. Morbi lectus nunc, aliquam volutpat egestas quis, iaculis a nulla. Pellentesque fermentum mauris at libero pulvinar viverra. Aliquam a ante orci, a luctus purus. Vivamus ut est ut mauris pulvinar mattis ac et magna. Aenean congue dictum lectus at suscipit. Suspendisse interdum, erat pulvinar gravida vulputate, mi mauris feugiat justo, at euismod augue sapien eu sapien. Praesent at quam purus. In hac habitasse platea dictumst. Fusce vel tellus a massa tempor volutpat a at magna. In eu enim odio. Quisque bibendum tortor est. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu.
    </div>
    <div class="scroll-down"></div>
    <div class="scroll-up"></div>
</div>

.post-right-cont {
    width: 540px;
    height: auto;
    overflow: hidden;
    position: relative;
}

.post-right {
    position: absolute;
    top: 0;
    left: 20px;
    height: auto;
    width: 480px;
    padding-top: 40px;
}

$(window).load(function() {
// SCROLL POST

            // EDIT - post-right-cont height was set up before. I just past it here now.
    var wHeight = $(window).height();
            $('.post-right-cont').css('height', wHeight - 36);

    if ($('div.post-right').height() > $('.post-right-cont').height()) {

        $('div.scroll-down').hover(function() {animateContent('down');}, function() {
            $('div.post-right').stop();
        });

        $('div.scroll-up').hover(function() {animateContent('up');}, function() {
            $('div.post-right').stop(); 
        });
    }

    function animateContent(direction) {

        var containerHeight =  $('.post-right-cont').height();

        var textHeight = $('div.post-right').height();

        var animationOffset = textHeight - containerHeight;

        if (direction == "up") {
            animationOffset = 0;
        }

        $('div.post-right').animate({"top" : -animationOffset + "px" }, 8500);

    }
});

---

$（'.post right cont'）.height（）

将返回一个值

0

，因为您只在其中包装了一个项目，该项目具有

绝对

定位，因此绝对定位元素不会增加

.post right cont

的大小。因此jQuery返回正确的值-

0

。

.post right

的高度不会增加

.post right cont

的高度，因为绝对定位元素不会增加其包装标签的高度或宽度

为什么要将属性设置为“自动”？这是

高度的默认值

是的，如果“auto”在那里或没有，这是相同的，但我只想清楚div的高度将根据我将载入的帖子而变化。谢谢。我理解。。。有没有办法将.post right real height值存储在我的textHeight变量中？只需设置高度

。post right cont

-无论如何，应该设置这样的高度，因为您应该指定容器的高度，您要在其中放置绝对位置的元素<代码>。右贴高度可以保持

自动

。然后一切都会正常工作。我忘了提到我之前设置了$（'.post right cont'）.height（）（我在第一篇文章中编辑了代码），所以它返回的值不同于0。仍然缺少的值是.post right height，该值将根据每个不同post在该分区内的文本量而变化。如何计算。post right div height size？

。post right

height将根据您的分区内文本正确返回。你可以看看我在这里说什么：