根据内容大小动画和调整 div 动态高度

Posted 2023-03-06

【中文标题】根据内容大小动画和调整 div 动态高度

【英文标题】：Animate and resize div dynamic height according to content size

【发布时间】：2013-02-28 17:32:16

【问题描述】：

有谁知道是否可以对 div 的大小进行动画调整，使其恰好适合内容的大小？高度必须是动态的，这意味着如果我调整浏览器窗口的大小，那么 div 将增加/减少高度。我已经有了 80% 视口的动态宽度。

这是我目前用来动画调整容器大小的方法，调整大小部分有效，但调整大小时不播放动画。当我将高度设置为固定高度时，说：

$(".pagecontainer").animate(
    height: '700px'
, 500);

它动画了。但是如果我有 height: 'auto'，那么它就不会动画，只是捕捉到新的大小。

JS：

<script>

    function setContainerHeight() 
        $(".pagecontainer").animate(
            height: 'auto'
        , 500);
    

    $('.link').on('click', function(e)
        $('.pagecontainer>div').fadeOut(0);
        setContainerHeight();
        $(this.getAttribute("href")).fadeIn();
    );

</script>

CSS：

.pagecontainer 
min-height:450px;
width:80%;
min-width:800px;
padding:50px 0;
margin: 0 auto;

.pagecontainer>div
display: none; /*wait until page needs to be faded in*/
padding-left:50px;
padding-right:50px;
position:relative;

html：

<div class="pagecontainer">

    <a href="#page1" class="link">page 1</a>
    <a href="#page2" class="link">page 2</a>
    <a href="#page3" class="link">page 3</a>

    <div id="page1">TONS OF TEXT HERE</div>

    <div id="page2">A BIT OF TEXT HERE</div>

    <div id="page3">BUNCH OF IMAGES</div>

</div>

例如第 1 页有大量文本，我不知道它会占用多少高度，因为高度本身是动态的，如果我加宽浏览器窗口，那么显然需要的高度会缩小。第 2 页可能只有一点文字，因此所需的高度会小得多。第 3 页有一堆图像，但我不知道适合所有图像所需的高度（这是我的问题的重点，让脚本计算需要多少高度）。

如何调整“.pagecontainer”的大小，使其高度即使在调整浏览器窗口大小时也能完美匹配每个页面上的内容？例如，如果我点击 page1，那么容器会放大（使用 jQuery 的 .animate() 动画），然后如果我点击 page2，那么容器会缩小。

这是图片说明：http://i.imgur.com/leOeJG0.png

谢谢。

【问题讨论】：

我很难理解你的问题。我如何既能完美匹配内容又能同时调整浏览器窗口的大小？我能想到的唯一方法就是调整内容的大小，但这不是你的意思吗？

嗯，容器将随着浏览器窗口调整大小。我把它设置为80%。意味着当我缩小视口时，容器会变小，并且需要更多的高度。例如，当视口为全尺寸时，需要 400 像素的高度，以适应一个巨大的文本块，宽度为 80%（组成一个数字，比如 80% 的宽度为 1000 像素）。如果我将视口大小调整为 50%，那么假设现在高度需要为 700 像素以适应所有文本，宽度仍然是当前视口的 80%（现在它将是 500 像素）。我不明白这有什么令人困惑的地方？

任何 div 的默认设置是 height: auto; 通常会得到“完美契合”？ $(".pagecontainer").animate( height: 'auto', 500); 应该可以吗？

天哪，我忘了有一个自动高度选项。感谢这对调整大小部分有用，但现在它不是动画。在我有 height: '700px' 或任何固定高度之前，它会为调整大小设置动画。现在我把它放在自动它不会再动画了。 （我现在将编辑问题）

【参考方案1】：

我没有理由计算高度 - 高度会自动为您改变。

jQuery

$('.pagecontainer>div').fadeOut(0);

$('.link').on('click', function(e)
    $('.pagecontainer>div').fadeOut(0);
    $(this.getAttribute("href")).fadeIn();
);

HTML 结构

<a href="#page1" class="link">page 1</a>
<a href="#page2" class="link">page 2</a>
<a href="#page3" class="link">page 3</a>

<div class="pagecontainer">

    <div id="page1">Block One</div>
    <div id="page2"><img src="http://placehold.it/200x200" /></div>
    <div id="page3"><img src="http://placehold.it/300x400" /></div>

</div>

http://jsfiddle.net/daCrosby/tmuC2/

编辑

根据您的 cmets，您需要它上下动画，而不是淡入淡出。为此，请使用animate([height:"show",speed) 和animate([height:"hide",speed)，如下所示：

    $('.pagecontainer>div').animate(height:"hide",500);
    $(this.getAttribute("href")).animate(height:"show",500);

http://jsfiddle.net/daCrosby/tmuC2/1/

【讨论】：

谢谢，但淡入/淡出是针对页面内容本身的。我希望当我单击另一个页面的链接时内容淡出。

【参考方案2】：

在我看来，不需要函数 expandPageContainer() - 当没有容器可见并且您不需要计算任何高度的绝对值时，动画就会发生。

只需删除expandPageContainer() 的函数和函数调用，并将您的容器CSS 设置为height: auto，您所期望的行为就会发生。调整容器大小以适应其内容的高度是默认行为。 （您可能想删除margin-bottom 规则）

同时调用fadeOut(0) 与hide() 相同。后者效率更高。