如何设置 div 的高度匹配响应内容？

Posted 2023-03-06

【中文标题】如何设置 div 的高度匹配响应内容？

【英文标题】：How can I set a div's height matching to responsive content?

【发布时间】：2013-03-21 22:08:07

【问题描述】：

我尝试执行以下操作： 单击时重新调整与 div 内容高度匹配的 div 高度（内容通过“overflow:hidden”隐藏） div 的内容是响应式的（意味着如果窗口宽度改变，div 的内容高度也会改变。

点击更改 div (.video) 高度以匹配 div 内容 (.video-container) 高度：

$('.video').click(function()

    $(this).animate(
    
        height:$('.video .video-container').height()
    );
);

这很好用，但如果我调整窗口大小，.video-container 的高度会发生变化，我需要再调整 .video 的大小。

这是我已经得到的一切：

视频：

<div class="video">
    <div class="video-container">
        <div class="flowplayer">
            <video preload='none'>
                <source type="video/mp4" src="video.mp4"/>
            </video>
        </div>
    </div>
</div>

javascript：

$(document).ready(function()

    $('.video').click(function()
     
        $(this).animate(
        
            height:$('.video .video-container').height()
        ); 
    );

链接已删除 - （找到解决方案，现在一切正常）

如果您单击它扩展的第一个黑色容器，之后您会注意到，如果您重新调整浏览器的大小，视频会变小，但容器会保持较大。我希望这能澄清问题。

【参考方案1】：

根据您发布的新信息，我想出了这个：

新小提琴示例：http://jsfiddle.net/YSqAX/4/

我使用了调整大小插件，因为原生 jquery resize 不会检测到元素何时调整大小。

Ben Alman jquery resize plugin

//animate height
$.fn.animateHeight = function (container) 
    var thisHeight = $(container).map(function (i, e) 
        return $(e).height();
    ).get();

    return this.animate(
        height: thisHeight
    );
;

$(".video").on("click", function () 
    $(this).animateHeight(".video-container");
);

$(".video").resize(function (e) 
    $(this).animateHeight(".video-container");
);

【讨论】：

好吧，我猜你误会了：你说的已经在$('.video').click(function()$(this).animate(height:$('.video .video-container').height()););这行完成了，问题是.video-container 的高度会通过调整窗口大小而改变，所以我需要用新的高度更新所有扩展的 div。我会用更多信息更新第一篇文章。

@memylo 谢谢。额外的信息有所帮助。答案已更新。

工作，只是添加了一个检查它是否已经扩展：if ( $(this).height() > 170)$(this).animateHeight(".video-container");